背景附件：已修复，无法正常使用-Android Chrome（v40） [英] Background-attachment:fixed Not Working - Android Chrome (v40)

问题描述

（这是要求 之前，很多次。似乎每次都是由不同的原因引起的。我已经经历了大约四个不同的StackOverflow回答线程并尝试了所有方法。似乎什么都没有了，所以我认为这是一个新问题。）

( This has been asked before, many times, I know. However, it seems to have been caused by different things each time. I have gone through about four different StackOverflow answer threads and tried everything. Nothing seems to be working anymore, so I believe this is a new problem. )

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

Anyway, I have an HMTL element with a background image that needs to be fixed, using background-attachment:fixed;

• 所有桌面浏览器-Works


• 移动Firefox-Works


• 默认Android /三星浏览器-Works


• 移动频道罗马-不起作用

• All desktop browsers - Works
• Mobile Firefox - Works
• Default Android/Samsung Browser - Works
• Mobile Chrome - Doesn't Work

我已将问题分解为一个更简单的可复制测试，即单个 section 元素，设置为页面高度的 200％，背景为全屏且固定。

I've spun the problem into a more simple replicable test, which is a single section element, set to200% of the page height, with the background being full-screen and fixed.

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>

要比代码段更轻松地在智能手机上进行测试： http://jsfiddle.net/LerLz1L2/

For easier testing on your smartphone than a code snippet: http://jsfiddle.net/LerLz1L2/

• 背面可见性：隐藏；


• -webkit-backface-visibility：inherit;


• -webkit-transform：translate3d（0,0,0）;


• 设置元素和所有父母到 position：static

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• Setting element and all parents to position:static

推荐答案

以下代码在android chrome中对我来说效果很好。

The below code worked fine for me in the 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;
}

我从此处

这篇关于背景附件：已修复，无法正常使用-Android Chrome（v40）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！