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

Я наткнулся на проблему с отображением двух перекрывающихся элементов с opacity = .5. Элементы абсолютно одинаковы и расположены абсолютно. Один находится поверх другого. Здравый смысл подсказывает, что эффект должен дать нам изображение со 100% непрозрачностью (0,5 + 0,5 = 1), но это не так.

Я был бы очень признателен, если бы кто-нибудь позаботился о том, чтобы объяснить механизм рендеринга таких элементов, потому что, очевидно, есть некоторые основные проблемы, которые я не получаю.

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

<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

Благодаря

источник

2014-01-22 mpietrowiak

Ваш не просто добавление изображения к изображению. Там тоже белый фон. Первое изображение смешивается с белым. Второе изображение смешивается с результатом первого микса. – TheSavage

** Это не ** 0,5 + 0,5, а ** ** 0,5 * 0,5 **, что на 75% непрозрачно. Используя ваше мышление, как три элемента выглядят как уложенные друг на друга с непрозрачностью 0,5? 150% непрозрачный? Ну нет. Они были бы непрозрачными на 87,5%. –

@TheSavage, белый фон имеет 0 влияние на непрозрачность элементов. Не путайте яркость с непрозрачностью. – brouxhaha

Try и думать о нем, как процент продаж. Это немного другое, но аналогия дает представление о том, что происходит. Когда элемент стоимостью 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; 
}

источник

2014-01-22 22:53:31 brouxhaha

большое спасибо за этот конструктивный ответ; так что вы думаете, что мы не можем получить 100% непрозрачность с перекрытием 2 'img'? – kevpoccs

Не могли бы вы объяснить уравнение '50% + (50% * 50%)? Я думаю, что я понимаю, что два значения в скобках являются элементами, которые сложены. Почему он добавляется к 50%? – bozdoz

Подумайте о наличии двух окон, каждый из которых позволяет пропускать 50% света.В первом окне будет 50% пройденного света, что означает, что 50% начального света переходит в следующее окно. Затем это окно блокирует 50% оставшегося света из первого окна, что означает, что 25% (50% от 50% или 50% * 50% или 1/2 * 50%) начального света проходит через второе окно. – brouxhaha

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

Более длинный ответ: here или here

источник

2014-01-22 22:54:10

Есть три элемента суммируются:

Белый фон на 100%
Первая фотография на 50%
Вторая картина на 50%

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

источник

2014-01-22 22:56:56

Если у вас есть черный фон, у вас все еще есть два изображения с непрозрачностью 50%, что дает комбинированную непрозрачность 75%. Легкость и непрозрачность не связаны. – brouxhaha

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

ответ

Смежные вопросы