在所有版本的 IE 中重复出现伪元素问题

Question

在 IE 9、10、11 和 Edge 中似乎存在一个带有伪元素的问题，如果它们具有半透明的重复背景，则背景图像的前半部分比其余部分暗很多图像（几乎就像图像之间有重叠）。它在所有其他浏览器中都很好，而且似乎是如此独特，以至于我在任何地方都找不到任何关于它的参考资料。

试图实现的效果是显示图像，并在顶部放置具有一定不透明度的图案以创建微妙的图案效果。虽然还有其他可能实现这一目标的方法，但这似乎是最简单的方法。

Image: Example of what is currently happening.

我做了一个快速的 CodePen 示例。如果您查看任何版本的 IE 或 Edge，您会注意到一旦图像已经完全显示，第二次重复时，图像的前半部分明显比图像的后半部分暗，好像那一半的不透明度更高。

CodePen: Example of the issue with code.

如您所见，第一张带有非常基本图案的图像就可以了。第二张图片虽然很大并且有同样的问题，我无法弄清楚是什么导致它做这样的事情。两张图片都以完全相同的方式重复。

这是伪元素的代码，在 CSS3 属性或技巧等方面没有什么特别之处。

.element::after {
    background-image: url(http://example.com/image.png);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 1

一个非常奇怪的错误。不知道为什么会这样。问题在图片中。例如，如果将其宽度减小到 1000 像素，它会很好地工作。

body {
	background-color: #232323;
}

.wrap {
	width: 100%;
	margin: 0 auto;
	float: none;
	display: block;
}

.slider2 {
	width: 100%;
	height: 200px;
	margin: 10px 0;
	padding: 10px;
	float: left;
	display: block;
	box-sizing: border-box;
	position: relative;
}

.slider2::after {
	content: "";
	opacity: 1;

	width: 100%;
	height: 100%;
	display: block;

	background-image: url('http://i.imgur.com/tmGMRCB.png');
	background-repeat: repeat;
	background-position: top left;
		
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

<div class="wrap">	
	<div class="slider2" style="background-image: url(http://img.wallpaperfolder.com/f/4A4B79479EAC/desert-sand-dunes-u6n12nvy10.jpg); background-position: top center;">
		Slider 2
	</div>
</div>

解决办法：换个图片试试。