Question

我正在开发一个网站，其中我使用了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>

Answer 1

我刚遇到了类似的问题，我的封面+修复后无法正常工作，图像在chrome上消失，能够像这样解决：

抓取更高的节点定义并禁用可能存在冲突的一些CSS属性，例如，在我的情况下，有一个：

导致它的backface-visibility: hidden级别的

<body>。这是由animate.css框架引入的。

对不起它不是一个具体的答案，但至少这提供了一些如何调试你的css代码的想法。

Answer 2

没有什么对我有用，最后这就完成了诀窍而没有任何理由：）

-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。希望有所帮助。

Answer 3

上述代码适用于Chrome For Windows，

尝试包含供应商前缀

-webkit-background-size: cover !important;

试一试

Answer 4

这解决了我的问题：

.section{ position: static; }

（position: relative）

Answer 5

虽然这有点晚了，但是通过添加下面的css样式似乎可以解决它。

html, body { 
-webkit-transform: translate3d(0px, 0px, 0px);
}

Answer 6

一个迟到的答案，但我带着这个来到这里，不知怎的，我为这个做了一个黑客。

我们的想法是创建一个内部元素，它将保存背景图像，并且与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()
    });
});

Answer 7

不确定其他人，但这对我有用：

Z-index: -1

Answer 8

使用chrome 42 ，背景附件对我不起作用......直到我关闭Dev Tools。

希望这可以节省一些人的时间！

Answer 9

bootstrap carousel对我造成的影响。添加此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;
}

Answer 10

如果您的网站上的任何地方都使用了transform: translate3d();，那么background-attachment: fixed;将会破坏Chrome。如果可能，请将transform: translate3d();的所有实例更改为transform: translate();。这应该可以解决你的问题。

Answer 11

@sabatino's answer是正确的，但这将破坏Firefox中的background-attachment：fixed行为，因为无论出于何种原因，它们也会解释-webkit前缀的属性。

因此，您必须像这样覆盖它，以使其在两种浏览器中都能工作：

-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: none;

background-attachment：修复不在chrome中工作

11 个答案: