我正在开发一个使用background-attachment:fixed 的网站
财产。它在 Firefox 中运行良好，但图像不固定。在 Chrome 中它表现正常。这是代码：
CSS：
.AboutBg
{
background-attachment: fixed;
background-image: url("../Images/LandingPage/smart.jpg");
background-position: 0 0;
background-repeat: repeat;
background-size: cover;
height: 90%;
position: absolute;
width: 100%;
}
HTML：
<div class="AboutBg"></div>
【问题讨论】：
标签： html css google-chrome
我刚刚遇到了类似的问题，我的封面 + 固定无法正常工作，并且图像在 chrome 上消失了，并且能够像这样解决它：
爬到更高的节点定义并禁用一些可能有冲突的 CSS 属性，以我为例，有一个：
backface-visibility: hidden 在导致它的<body> 级别。这是由 animate.css 框架引入的。
抱歉，这不是一个具体的答案，但至少这提供了一些关于如何调试 css 代码的想法。
【讨论】：
class 的.animated 中注释掉了-webkit-animation-fill-mode: both;，它解决了这个问题。
上面的代码应该适用于 Chrome For Windows，
只需尝试包括供应商前缀
-webkit-background-size: cover !important;
试试看
【讨论】：
没有什么对我有用，最后这在没有任何理由的情况下成功了:)
-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed !important;
position: static !important;
z-index: -1 !important;
这在 Firefox 和 chrome 中都适用于我。希望有帮助。
【讨论】：
虽然这有点晚了，但通过添加下面的 css 样式似乎可以为我解决这个问题。
html, body {
-webkit-transform: translate3d(0px, 0px, 0px);
}
【讨论】：
这解决了我的问题：
.section{ position: static; }
（以前是position: relative）
【讨论】：
@sabatino's answer 是对的，但这会破坏 Firefox 中的 background-attachment:fixed bahavior，因为无论出于何种原因，它们也会解释 -webkit 前缀属性。
所以你必须像这样覆盖它以使其在两个浏览器中都能正常工作：
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: none;
【讨论】：
一个迟到的答案，但我想到了这个，不知何故我为这个做了一个破解。
这个想法是创建一个内部元素来保存背景图像，并与background-attachment:fixed 属性相同。
由于这个属性使背景图像的位置相对于窗口，我们必须在它的容器内移动内部元素，这样我们就会得到这种效果。
var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
"background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
"background-position" : "center center",
"background-repeat" : "no-repeat",
"background-size" : "cover",
"position" : "absolute",
"height" : $(window).height(), /*Make the element size same as window*/
"width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it's parent*/
$(window).scroll(function(){
var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
$(".px_bg_holder").css({
"margin-top" : bg_pos+"px"
});
});
$(window).resize(function(){
$(".px_bg_holder").css({
"height" : $(window).height(),
"width" : $(window).width()
});
});
【讨论】：
不确定其他人，但这对我有用：
Z-index: -1
【讨论】：
使用 chrome 42，背景附件对我不起作用...直到我关闭开发工具。
希望这可以节省别人的时间！
【讨论】：
引导轮播是我造成的。将此 CSS 添加到反向转换属性修复它。
#carouselName .carousel-inner div.item.active {
/* left: 0; */
-webkit-transform: none;
transform: none;
-webkit-backface-visibility: visible;
-webkit-font-smoothing: antialiased;
-webkit-perspective: none;
-webkit-transform: none;
-webkit-transition-delay: none;
-webkit-transition-duration: none;
-webkit-transition-property: none;
-webkit-transition-timing-function: none;
backface-visibility: visible;
}
【讨论】：
如果transform: translate3d(); 在您网站上的任何位置使用，background-attachment: fixed; 将在 chrome 中中断。如果可能，将transform: translate3d(); 的所有实例更改为transform: translate();。这应该可以解决您的问题。
【讨论】：