모든 버전의 IE에서 유사 요소 문제 반복

Question

IE 9, 10, 11 및 Edge에서 가상 요소가있는 문제가있는 것 같습니다. 반복되는 배경이 반투명 한 경우 배경색의 첫 번째 부분이 반투명합니다. 이미지는 이미지의 나머지 부분보다 훨씬 더 어둡습니다 (거의 이미지 사이에 겹침이있는 것처럼). 다른 모든 브라우저에서는 괜찮습니다. 어디서나 관련 정보를 찾을 수없는 고유 한 것 같습니다.

달성하고자하는 효과는 이미지를 표시하고 상단에 배치 된 특정 불투명도가있는 패턴을 사용하여 미세한 패턴 효과를 만드는 것입니다. 잠재적으로 달성 할 수있는 다른 방법이 있지만, 이것이 가장 쉬운 방법 인 것 같습니다.

Image: Example of what is currently happening.

나는 빠른 CodePen 예를했다. 어떤 버전의 IE 또는 Edge를 보면 이미지가 완전히 표시되고 두 번째로 반복되면 이미지의 전반부가 이미지의 두 번째 절반보다 두드러지게 어두워집니다 그 절반은 그것에 더 높은 불투명도를 가지고 있습니다. 당신이 볼 수 있듯이

CodePen: Example of the issue with code.

은 아주 기본적인 패턴으로 첫 번째 이미지는 괜찮습니다. 두 번째 이미지는 꽤 크고 동일한 문제가 있으며 그 일을하도록 만드는 원인을 파악할 수 없습니다. 두 이미지가 똑같은 방식으로 반복됩니다.

이

등

.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

아주 이상한 버그를 속성이나 트릭 CSS3의 측면에서 일반 밖으로 의사 요소에 대한 코드, 아무것도이다. 왜 이런 일이 일어날 지 모르겠다. 문제는 그림에 있습니다. 너비를 1000px로 줄이면 예를 들어 제대로 작동합니다.

body { 
 
\t background-color: #232323; 
 
} 
 

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

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

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

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

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

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

솔루션

: 사진을 변경하려고합니다.