CSS 使用 ios7 修复背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20443574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed background image with ios7
提问by user2560895
I have a project that I am using the fixed background image. It works great on everything except ios7. On the ipad the background image is zoomed in and blurry. Here is the CSS code I am using -
我有一个使用固定背景图像的项目。它适用于除 ios7 以外的所有内容。在 ipad 上，背景图像被放大且模糊。这是我正在使用的 CSS 代码 -
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #fff;
background: url(../images/boston2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
here is a link to the live page - www.wdeanmedical.com
这是直播页面的链接 - www.wdeanmedical.com
What am I missing?
我错过了什么？
回答by brouxhaha
Using background-attachment: fixedwith background-size: covercauses issues on most mobile browsers (as you've seen). You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}
在大多数移动浏览器上使用background-attachment: fixedwithbackground-size: cover会导致问题（如您所见）。您可以尝试使用background-attachment: scroll. 这不会产生您想要的效果，但您至少会看到图像。您可以使用一两个媒体查询将其限制为平板电脑或手机的设备，方法是使用@media screen and (max-device-width: 1024px){}
OR
或者
You can use background-position: scrolland include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO
您可以使用background-position: scroll并包含一些 javascript 将图像保持在滚动位置（保持在窗口顶部）：DEMO
回答by Ylama
I had a very simplesolution for this, after struggling with all the methods of fixing this.
在尝试了所有解决此问题的方法之后，我对此有一个非常简单的解决方案。
i had the problem on my mobile IOS devices.
我在我的移动 IOS 设备上遇到了问题。
css(desktop)
css（桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}
.widget-wrap {
background-attachment: scroll;
}
Then i overwrite it with media query removing "fixed" as background attachment.
然后我用媒体查询覆盖它，删除“固定”作为背景附件。
css(mobile)
css（移动）
/*-------- iPads (portrait and landscape) --------*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-attachment: initial;
}
}
initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.
初始 - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会回退到它接受的默认值，滚动。
This worked for me on every device. Hope it helps someone else as well.
这在每台设备上都对我有用。希望它也能帮助其他人。
回答by Tim
Know this is an old thread, but wanted to provide an updated solution that builds on the solution from @Cruz-Nunez
知道这是一个旧线程，但想提供一个更新的解决方案，该解决方案基于@Cruz-Nunez 的解决方案
Relying on viewport size is liable to fail. For example, relying on a 767px viewport won't work on iPads, and increasing the size negates the benefit of this approach.
依赖视口大小可能会失败。例如，依赖 767px 视口在 iPad 上不起作用，并且增加尺寸会抵消这种方法的好处。
Instead, you can check if the device has hover capabilities, and if it doesn't, override like this:
相反，您可以检查设备是否具有悬停功能，如果没有，则像这样覆盖：
@media (hover: none) {
.homeHero {
background-attachment: initial;
}
}
You can also check if the device has a course pointer (e.g. a finger) instead of a fine one (e.g. a mouse):
您还可以检查设备是否有路线指针（例如手指）而不是细指针（例如鼠标）：
@media (pointer: coarse) { ... }
回答by Cruz Nunez
回答by MugenFTW
.header {
background-position: -99999px -99999px;
}
.header:before {
content: "";
background-image: inherit;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover;
background-size: cover !important;
z-index: -1;
}
I believe I have achieved the desired effect on my own site using the above in conjunction with a fix to allow 100vh to work on ios devices.
我相信我已经在我自己的网站上实现了预期的效果，结合使用上述修复程序，允许 100vh 在 ios 设备上工作。
回答by Creedish
Or you can just put a transparent div that covers the screen and use overflow:scroll. Just for the sake of it you can rewrite the height of the div with javascript to screen.height.
或者您可以放置一个覆盖屏幕的透明 div 并使用溢出：滚动。只是为了它，您可以使用javascript将div的高度重写为screen.height。
#scrollbox {
width: 100%;
height: 100%;
overflow: scroll;
background: transparent;
}document.getElementByID("scrollbox").style.height = screen.height;回答by Osprey Eagle
Combining the ideas of @brouxhaha and @yllama: Use a media query that targets iOS, which is found at this SO post, to set
结合@brouxhaha 和@yllama 的想法：使用针对 iOS 的媒体查询（可在此SO 帖子中找到）来设置
background-attachment: scroll;
This way the fixed background image appears for non-iOS mobile and all other devices.
这样，固定背景图像就会出现在非 iOS 移动设备和所有其他设备上。
.widget-wrap {
background-attachment: fixed;
...
...
}
@supports (-webkit-overflow-scrolling: touch) {
.widget-wrap {
background-attachment: scroll;
}
}
回答by Gianni Unz
What about something like this? (i just noticed that @mems already proposed it)
这样的事情怎么办？（我刚刚注意到@mems 已经提出了它）
body {
position: relative;
}
body:after {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: '';
background-image: url(./img/YOUR_IMG.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #000;
background-position: bottom right;
}
回答by AGrush
Use CSS perspective instead of JS or fixed background parallax for best performance and device compatibility.
使用 CSS 透视而不是 JS 或固定背景视差以获得最佳性能和设备兼容性。
body, html {
margin: 0;
padding:0;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: 100%;
z-index: -1;
background-image: url('http://placeimg.com/640/480/any');
}
.content {
height: 200vh;
display: flex;
justify-content: center;
background: red;
}<div class="wrapper">
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
</div>回答by tomDev
My solution is a workaround. I created a div with 100%, fixed, and added the background image since iOS still ignores "background-attachment: fixed".
我的解决方案是一种解决方法。我创建了一个 100% 固定的 div，并添加了背景图像，因为 iOS 仍然忽略“背景附件：固定”。
<div style="
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position:center;
top: 0; right: 0;
z-index: -1000;
background-image: url(image.jpg)">
</div>
