我有一个使用固定背景图像的项目。它适用于除 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;
}
这里是实时页面的链接 - www.wdeanmedical.com
我错过了什么？
【问题讨论】：
标签： css background ios7 cover
将background-attachment: fixed 与background-size: cover 一起使用会导致大多数移动浏览器出现问题（如您所见）。您可以尝试使用background-attachment: scroll。这不会产生您想要的效果，但您至少会看到图像。您可以使用一两个媒体查询将其限制为平板电脑或手机等设备，方法是使用@media screen and (max-device-width: 1024px){}
或
您可以使用background-position: scroll 并包含一些将图像保持在滚动位置（保持在窗口顶部）的javascript：DEMO
【讨论】：
知道这是一个旧线程，但想提供一个基于@Cruz-Nunez 解决方案的更新解决方案
依赖视口大小可能会失败。例如，依赖 767px 视口在 iPad 上不起作用，并且增加尺寸会抵消这种方法的好处。
相反，您可以检查设备是否具有悬停功能，如果没有，请像这样覆盖：
@media (hover: none) {
.homeHero {
background-attachment: initial;
}
}
您还可以检查设备是否有粗指针（例如手指）而不是细指针（例如鼠标）：
@media (pointer: coarse) { ... }
【讨论】：
hover: none。谢谢！
在尝试了所有解决此问题的方法之后，我有一个非常简单的解决方案。
我在移动 IOS 设备上遇到了问题。
css（桌面）
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}
.widget-wrap {
background-attachment: scroll;
}
然后我用媒体查询覆盖它，删除“固定”作为背景附件。
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 - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会退回到它接受的默认值，滚动。
这对我在所有设备上都有效。希望它对其他人也有帮助。
【讨论】：
试试这个：
HTML
<div class="container">
<div class="fixed-img"></div>
<h1>Words that go over text</h1>
</div>
css
.fixed-img {
position: fixed;
z-index: -1;
}
JSFiddle 示例
【讨论】：
.container::before{content: "";display: block;position: fixed;z-index: -1;height: 100%;width: 100%}，并且不需要在DOM中添加任何元素
background-attachment: fixed;，而是将背景图片添加到position: fixed; div。
编辑：2020 年 9 月 这在一些 iPad 上坏了，所以我现在使用：
@supports (-webkit-touch-callout: inherit) {
.paral {
background-attachment: scroll;
}
}
原帖： 结合@brouxhaha 和@ylama 的想法：使用针对iOS 的媒体查询（在此SO post 找到）来设置
background-attachment: scroll;
这样，固定的背景图像就会出现在非 iOS 移动设备和所有其他设备上。
.widget-wrap {
background-attachment: fixed;
...
...
}
@supports (-webkit-overflow-scrolling: touch) {
.widget-wrap {
background-attachment: scroll;
}
}
【讨论】：
@supports not (background-attachment: fixed) 不起作用。
.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;
}
我相信我已经在我自己的网站上实现了预期的效果，使用上述内容并结合修复以允许 100vh 在 ios 设备上工作。
【讨论】：
我遇到了与您相同的问题，并为此苦苦挣扎了将近 3 天。但截至 2020 年 6 月并改进了@AGrush 的答案，这是我找到的一个可靠的解决方案，适用于所有设备并且具有 100% 的浏览器兼容性。它允许在页面的任何位置产生所需的效果，而不仅仅是页面的顶部或底部，您可以根据需要或想要创建任意数量的效果。
这还解决了 @Ylama、@Cruz-Nunez、@Tim 和 @LWRMS 提供的不同问题，这些答案依赖于设备媒体查询，如您所知，这些查询没有标准并且在许多新设备上有所不同。并且还避免使用我从未真正能够使用的伪元素，就像@MugenFTW 和@Gianni Unz 提出的解决方案一样。
到目前为止，唯一已知的问题是此选项在 safari 中。浏览器在每次滚动时都会重新绘制整个图像，因此会给图形带来沉重的负担，并且大多数时候会使图像上下闪烁约 10 像素。这实际上没有解决办法，但我认为您的询问也没有更好的回应。
我希望这对你有用。您可以在www.theargw.com 中查看结果，其中我有三个不同的固定背景图像。
body, .black {
width: 100%;
height: 200px;
background: black;
}
.e-with-fixed-bg {
width: 100%;
height: 300px;
/* Important */
position: relative;
}
.bg-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-image: url(https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
transform: translateZ(0);
will-change: transform;
}
.e-container {
z-index: 1;
color: white;
background: transparent;
}<div class="black"></div>
<div class="e-with-fixed-bg">
<div class="bg-wrap">
<div class="bg"></div>
</div>
<div class="e-container">
<h1>This works well enought</h1>
</div>
</div>
<div class="black"></div>--------- 编辑 --------- 发布的代码是缺少允许背景不改变大小并保持固定位置的背景包装。抱歉，今天早上发布了错误的代码，伙计们！但这里是变化。
【讨论】：
这样的事情呢？ （我刚刚注意到@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;
}
【讨论】：
或者您可以只放置一个覆盖屏幕的透明 div 并使用溢出：滚动。只是为了它，您可以使用 javascript 将 div 的高度重写为 screen.height。
#scrollbox {
width: 100%;
height: 100%;
overflow: scroll;
background: transparent;
}document.getElementByID("scrollbox").style.height = screen.height;【讨论】：
使用 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>【讨论】：
我的解决方案是一种解决方法。我创建了一个 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>
【讨论】：
.imageDiv {
background: url('image.jpg') center center no-repeat fixed;
background-size: cover;
}
@supports (-webkit-touch-callout: none) {
.imageDiv {
background: url('image.jpg') center top no-repeat scroll;
background-size: auto 100vh;
}
}
【讨论】：