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>

解决方案：尝试改变图片。

在所有版本的IE

1 个答案: