4

このページを上下にスクロールして、下の画像を見てください。画像がちらつくことがあります。(スクロール ホイールは使用しないでください。スクロール量が大きくなり、効果が見られない可能性があります。)

ストライプ

縞模様の背景を使用するときにこの影響を回避するには、CSS に次を追加できます。

background-attachment: fixed;

これにより、背景が固定されたままになるため、ユーザーがページをスクロールしてもちらつきません。これは Chrome と Firefox ( demo ) では問題なく動作しますが、IE では動作しません。background-attachment 機能は IE8 以降でサポートされるはずですが、なぜ機能しないのでしょうか? さらに重要なことに、IE でちらつきをなくすにはどうすればよいですか?

4

3 に答える 3

2

これを IE9 だけにフィードすることもできます (IE8 では疑似要素では機能しないようです。そのため、IE7-8 をサポートするには、それを elmeent 自体にします)、またはすべてのブラウザーに使用しますが、実際にはそれをfixed要素に入れます (またはこの場合、疑似要素) がフリッカーを解決しました ( fiddle を参照):

.background:after {  
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://www.commentnation.com/hotlinks/diagonal_pin_stripes_background_gray_on_white.gif);
    background-attachment: fixed;
    z-index: -1;
}

IE7-8 の場合( fiddle を参照):

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(http://www.commentnation.com/hotlinks/diagonal_pin_stripes_background_gray_on_white.gif);
    background-attachment: fixed;
    z-index: -1;
}
于 2012-07-24T17:44:21.187 に答える
-3

追加することをお勧めします

background-repeat: no-repeat;

まだ行っていない場合はcssに移動し、background-positionを調整します。これはちらつきに役立つ場合があります。また、バックグラウンドアタッチメントをサポートするために正しいDOCTYPEを使用していることを確認してください。

于 2012-07-13T21:49:45.627 に答える