IE中滾動條紋重複背景閃爍

嘗試上下滾動此頁面並觀看下面的圖像。您可能會注意到圖像閃爍。（不要使用滾輪，因爲這將有可能通過大量離散量的滾動，你不會看到效果。）IE中滾動條紋重複背景閃爍

爲了避免這種影響使用條紋背景的時候，你可以添加以下你的CSS：

background-attachment: fixed;

這使得背景保持固定，這樣就不會出現時閃爍用戶滾動頁面。這在Chrome和Firefox（demo），但在IE中不起作用。背景附件功能應該在IE8及以上版本中支持，那麼爲什麼不能正常工作？更重要的是，我如何消除IE中的閃爍？

2012-07-13 David Jones

你可以把這個餵給IE9（在IE8中它似乎不適用於僞元素，所以對於IE7-8的支持，使它成爲elmeent本身），或者將它用於所有瀏覽器，但實際上將它成fixed元素（或在這種情況下，僞元素）解決我的閃爍（see 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（see 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-24 17:44:21 ScottS

該解決方案有效。 – tahdhaze09 2012-07-24 18:37:41

是的，我認爲使用實際的固定元素是最好的跨瀏覽器解決方案。謝謝！ – 2012-07-25 07:14:39

-2

我建議你添加

background-repeat: no-repeat;

的CSS，如果您還沒有調整的背景位置。這可能有助於閃爍。另外請確保您使用正確的DOCTYPE來支持後臺附件。

來源

2012-07-13 21:49:45 Pablo

感謝迴應，但問題是關於一個重複的背景，所以增加'不重複'不是一個選項。 – 2012-07-13 21:59:45

IE中滾動條紋重複背景閃爍

回答

相關問題