css - 条纹重复背景在 IE 中滚动时闪烁

Question

尝试上下滚动此页面并观看下图。您可能会注意到图像闪烁。 (不要使用滚轮，因为这可能会滚动大量不连续的量，您将看不到效果。)

要在使用条纹背景时避免这种效果，您可以将以下内容添加到您的 CSS:

背景附件:已修复；

这会导致背景保持固定，因此当用户滚动页面时它不会出现闪烁。这在 Chrome 和 Firefox ( demo ) 中工作正常，但在 IE 中不行。背景附件功能应该在 IE8 及更高版本中受支持，那么为什么这不起作用？更重要的是，如何消除IE中的闪烁？

Answer 1

你可以只将它提供给 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;
}