android - 背景附件：固定不工作 - Android Chrome (v40)

Question

背景

（这已经被问 过很多次了，我知道。但是，它似乎每次都是由不同的事情引起的。我经历了大约四个不同的 StackOverflow 回答线程并尝试了一切。似乎没有任何工作了，所以我相信这是一个新问题。）

无论如何，我有一个 HMTL 元素，其背景图像需要修复，使用background-attachment:fixed;

• 所有桌面浏览器 - 作品
• 移动 Firefox - 作品
• 默认安卓/三星浏览器 - 作品
• 移动 Chrome - 不工作

我把这个问题转变成一个更简单的可复制测试，它是一个单一section元素，设置为200%页面高度，背景是全屏和固定的。

---

代码

html,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section {
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
    height:200%;
    width:100%;
}

<section>Test</section>

---

用于测试的 JSFiddle

为了比代码片段更容易在智能手机上进行测试：http: //jsfiddle.net/LerLz1L2/

---

我尝试过的事情

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• 将元素和所有父母设置为position:static

Answer 1

下面的代码在 android chrome 中对我来说很好。

html {
  height: 100%;
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我从这里得到这个

Answer 2

对此有很大的问题 - 这是 android 中反复出现的问题（至少可以追溯到 4.0.0 版），尚未完全修复。错误报告在这里：https ://issuetracker.google.com/issues/36908439

我的 android 测试机在 Android 7.0.0 上运行 chrome 60 - 仍未完全修复。顶部或中心对齐的背景似乎可以正常工作，但底部对齐，尤其是右下角，在 android 中是一场噩梦。

我发现的最佳解决方法是将您的固定背景图像放入单独的专用 div 中，而不是浏览器背景本身...（

将您的 div 设置为视口高度和宽度的 100%，给它一个固定位置和 -10 的 z-index，然后将所有背景 inage 样式放置在该 div 中，将浏览器背景留空。

将背景图像放入浏览器充其量是滞后的，而且我发现的大多数其他解决方法都会在较旧的 IE 浏览器中创建抖动滚动。

当放置在专用 div 中时，我所有想要的背景图像样式都可以完美地工作。只有将它们放在浏览器背景本身时才会出错。

希望这可以帮助。

Answer 3

这适用于几乎所有浏览器，除了原生 android 浏览器

background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
max-width:100%;
max-height:100%;
width:auto;

强烈建议先设置图片 url

寻找安卓浏览器上的错误（背景附件：已修复）的解决方案。

希望有所帮助！

Answer 4

我采取了不同的方法来解决这个问题。我避免使用 css 背景策略，而是使用<img>标签并设置其 css 位置：已修复。像魅力一样工作，与 css 背景图像完全相同，并且适用于 android chrome。希望能帮助到你。

<style>
  ._background-image {
    position: fixed;
    z-index: -1;
    width: 800px;
  }
</style>

<div style="height: 100%">
 <img src="background-image.jpg" class="_background-image">
</div>

Answer 5

这仍然是一个错误，请参阅此问题-> https://issuetracker.google.com/issues/36908439