1

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

11 回答 11

15

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

爬到更高的节点定义并禁用一些可能有冲突的 CSS 属性，例如，在我的例子中，有一个：

backface-visibility: hidden在<body>导致它的水平。这是由 animate.css 框架引入的。

抱歉，这不是一个具体的答案，但至少这提供了一些关于如何调试 css 代码的想法。

于 2013-12-01T20:52:30.713 回答
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 中都适用于我。希望有帮助。

于 2015-04-09T04:39:00.720 回答
2

上面的代码应该适用于 Chrome For Windows ，

只需尝试包括供应商前缀

-webkit-background-size: cover !important;

试一试

于 2013-09-26T13:03:49.820 回答
1

这解决了我的问题：

.section{ position: static; }

（是position: relative）

于 2014-11-20T19:18:19.623 回答
1

虽然这有点晚了，但通过添加下面的 css 样式似乎可以为我解决这个问题。

html, body { 
-webkit-transform: translate3d(0px, 0px, 0px);
}
于 2014-05-29T10:20:15.287 回答
1

@sabatino 的答案是正确的，但这会破坏 Firefox 中的 background-attachment:fixed bahavior，因为无论出于何种原因，它们也会解释 -webkit 前缀属性。

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

-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: none;
于 2018-07-04T08:25:54.350 回答
0

一个迟到的答案，但我想到了这个，不知何故我为这个做了一个破解。

这个想法是创建一个内部元素，它将保存背景图像并充当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()
    });
});
于 2014-07-04T13:36:51.220 回答
0

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

Z-index: -1

于 2015-03-29T07:10:27.580 回答
0

使用 chrome 42，背景附件对我不起作用......直到我关闭开发工具。

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

于 2015-04-17T13:30:30.927 回答
0

引导轮播为我造成了它。将此 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;
}
于 2015-05-15T17:53:53.560 回答
0

如果transform: translate3d();在您网站上的任何地方使用，background-attachment: fixed;将在 chrome 中中断。如果可能，将 的所有实例更改transform: translate3d();为transform: translate();。这应该可以解决您的问题。

于 2015-08-31T22:32:27.823 回答