Я наткнулся на проблему с отображением двух перекрывающихся элементов с opacity =.5. Элементы абсолютно одинаковы и расположены абсолютно. Один находится поверх другого.
Здравый смысл подсказывает, что эффект должен дать нам изображение со 100% непрозрачностью (0,5 + 0,5 = 1), но это не так.
Я был бы очень признателен, если бы кто-нибудь хотел объяснить механизм рендеринга таких элементов, потому что явно есть некоторые основные проблемы, которые я не получаю.
HTML:
<div class="test">
<img src="..." alt="" width="200" height="200" class="t"/>
<img src="..." alt="" width="200" height="200" class="t"/>
</div>
<img src="..." alt="" width="200" height="200" class="test"/>
CSS
.test{
float: left;
position:relative;
width: 200px;
height: 200px;
}
.test .t{
position:absolute;
top:0;
left:0;
opacity: 0.5;
}
jsFiddle
Спасибо