Question

我有一个项目，我正在使用固定的背景图像。它适用于除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

我错过了什么？

Answer 1

将background-attachment: fixed与background-size: cover一起使用会导致大多数移动浏览器出现问题（如您所见）。您可以尝试使用background-attachment: scroll。这不会产生你想要的效果，但你至少会看到这些图像。您可以使用一两个媒体查询将其限制为使用@media screen and (max-device-width: 1024px){}

的平板电脑或手机设备

OR

您可以使用background-position: scroll并添加一些将图片保持在滚动位置的javascript（将其保留在窗口顶部）： DEMO

Answer 2

在解决了解决这个问题的所有方法之后，我有一个非常简单的解决方案。

我在移动IOS设备上遇到了问题。

css （桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

然后我用媒体查询删除＆＃34;修复＆＃34;作为背景附件。

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不接受“修复”＃39;它回退到它接受的默认值，滚动。

这适用于我的每台设备。希望它也可以帮助其他人。

Answer 3

试试这个：

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示例

Live example

Answer 4

.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设备上运行。

Answer 5

或者你可以放一个覆盖屏幕的透明div并使用overflow：scroll。只是为了它，你可以用javascript重写div的高度到screen.height。

#scrollbox {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: transparent;
}

document.getElementByID("scrollbox").style.height = screen.height;

Answer 6

结合@brouxhaha和@yllama的思想：使用针对iOS的媒体查询（在此SO post上找到）进行设置

background-attachment: scroll;

通过这种方式，固定背景图片会在非iOS移动设备和所有其他设备上显示。

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}

Answer 7

这样的事情呢？（我刚刚注意到@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;
    }

Answer 8

使用CSS透视图代替JS或固定的背景视差，以获得最佳性能和设备兼容性。

<div class="wrapper">
  <div class="section parallax">
   <h1>Heading</h1>
  </div>
  <div class="content">
    <h1>Site Content</h1>
  </div>
</div>

#include <stdio.h>

int main() {
    char c;
    scanf("%c", &c);
    while (c !='.'){
        //if(c != '/n');
        scanf("%c", &c);
        printf("%c", c);
    }
    return 0;
}

Answer 9

我的解决方案是一种解决方法。我创建了一个100％固定的div，并添加了背景图片，因为iOS仍会忽略“ background-attachment：fixed”。

<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>

Answer 10

我遇到了与您相同的问题，并为此苦苦挣扎了近三天。但是从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>

---------------------编辑---------------------发布的代码为缺少背景包装器，该包装器使背景无法更改大小并保持固定位置。抱歉今天早上发布错误的代码！但这是零钱。

使用ios7修复了背景图像

10 个答案: