背景

Question

背景

（我知道这是asked before，many times。但是，它似乎每次都是由不同的事情造成的。我经历了大约四次不同的StackOverflow回答线程并尝试了一切。似乎没有什么工作了，所以我相信这是一个新问题。）

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

进行修复

所有桌面浏览器 - 工作
移动Firefox - 工作
默认Android /三星浏览器 - 工作
移动Chrome - 无法使用

我已将问题转换为更简单的可复制测试，该测试是单个section元素，设置为页面高度的200%，背景为全屏并固定。< / p>

代码

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

为了便于在智能手机上进行测试而不是代码段：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;
}

我是从here

得到的

Answer 2

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

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

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

将div设置为视口高度和宽度的100％，给它一个固定的位置和一个z-index为-10，然后将所有背景样式放在该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;

强烈建议首先设置图片网址

在android浏览器上寻找bug（background-attachment：fixed）的解决方案。

希望有所帮助！

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

背景附件：修复不起作用 - Android Chrome（v40）

背景

代码

JSFiddle For Testing

我尝试过的事情

5 个答案: