在所有版本的 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

一个非常奇怪的错误。不知道为什么会这样。问题出在图片上。例如，如果将其宽度缩小到 1000px，效果会很好。

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 中重复出现伪元素问题

Repeating pseudo element issue in all versions of IE

html

css

internet-explorer

pseudo-element

microsoft-edge