Элементы перекрытия CSS и непрозрачность

Я наткнулся на проблему с отображением двух перекрывающихся элементов с 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

Спасибо

Ответ 1

Попробуйте и подумайте об этом, как о процентах продаж. Это немного отличается, но аналогия дает представление о том, что происходит. Когда элемент стоимостью 10 долларов США на 80%, вы снимаете дополнительные 20%, это не 100% скидка (80% + 20%). Вы вычисляете окончательную цену следующим образом:

$10 * (1 - 0.8)  = $2 * (1 - 0.2) = $1.60.

50% непрозрачности означает, что 50% света заблокировано. Поэтому, когда вы складываете два элемента с непрозрачностью 50%, это означает, что 50% света блокируется и на 50% больше света блокируется дополнительным слоем. Поскольку на первом уровне проходит только 50% света, только 50% этого дополнительного света блокируются. Таким образом, вычисление будет:

50% + (50% * 50%) = 75% opacity.

DEMO

.num2 {
    opacity: 0.75;
}

Ответ 2

Добавляется три элемента:

Белый фон на 100%
Первое изображение при 50%
Второе изображение при 50%

Первые два делают первое изображение намного легче перед смешиванием со вторым изображением.

Ответ 3

Короткий ответ: непрозрачность не является линейной функцией, поэтому она не добавляется.

Более длинный ответ: здесь или здесь