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

2

上記のコードは Chrome For Windows で動作するはずです。

ベンダープレフィックスを含めてみてください

-webkit-background-size: cover !important;

そして、試してみてください

于 2013-09-26T13:03:49.820 に答える
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 に答える
1

これは少し遅れていますが、以下の css スタイルを追加することで修正されるようです。

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

他の人についてはわかりませんが、これは私にとってはうまくいきました：

Z-index: -1

于 2015-03-29T07:10:27.580 に答える
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

遅い答えですが、私はこれを思いついたので、どういうわけかこれをハックしました。

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

transform: translate3d();Web サイトのどこかで を使用するbackground-attachment: fixed;と、Chrome で壊れます。可能であれば、 のすべてのインスタンスを に変更しtransform: translate3d();ますtransform: translate();。これで問題が解決するはずです。

于 2015-08-31T22:32:27.823 に答える
0

Chrome 42では、バックグラウンド アタッチメントが機能しませんでした... Dev Tools を閉じるまで。

これが誰かの時間を節約できることを願っています!

于 2015-04-17T13:30:30.927 に答える