Просто потому, что в обоих случаях сочетание цветов неодинаково из-за того, как непрозрачность верхнего слоя влияет на цвет нижнего слоя.
В первом случае вы видите 50 % синего цвета и 50 % прозрачности в верхнем слое. Сквозь прозрачную часть вы видите 50% красного цвета в нижнем слое (таким образом, всего мы видим только 25% красного цвета). Та же логика для второго случая (50% красного и 25% синего); таким образом, вы увидите разные цвета, потому что в обоих случаях у нас разные пропорции.
Чтобы избежать этого, вы должны иметь одинаковую пропорцию для обоих ваших цветов.
Вот пример, чтобы лучше проиллюстрировать и показать, как мы можем получить тот же цвет:
В верхнем слое (внутренний диапазон) у нас есть 0.25
непрозрачности (таким образом, у нас есть 25% первого цвета и 75% прозрачности), затем для нижнего слоя (внешний диапазон) у нас есть 0.333
непрозрачность (таким образом, у нас есть 1/ 3 из 75% = 25% цвета, а остальное прозрачно). У нас одинаковая пропорция в обоих слоях (25%), поэтому мы видим один и тот же цвет, даже если мы поменяем порядок слоев.
.a {
background-color: rgba(255, 0, 0, 0.333)
}
.b {
background-color: rgba(0, 0, 255, 0.333)
}
.a > .b {
background-color: rgba(0, 0, 255, 0.25)
}
.b > .a {
background-color: rgba(255, 0, 0, 0.25)
}
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
Кстати, белый фон также влияет на передачу цветов. Его пропорция составляет 50%, что дает логический результат 100% (25% + 25% + 50%).
Вы также можете заметить, что невозможно иметь одинаковую пропорцию для обоих цветов, если верхний слой имеет непрозрачность больше 0.5
, потому что первый слой будет иметь более 50%, и он будет остается менее 50% для второго:
.a {
background-color: rgba(255, 0, 0, 1) /*taking 40% even with opacity:1*/
}
.b {
background-color: rgba(0, 0, 255, 1) /*taking 40% even with opacity:1*/
}
.a > .b {
background-color: rgba(0, 0, 255, 0.6) /* taking 60%*/
}
.b > .a {
background-color: rgba(255, 0, 0, 0.6) /* taking 60%*/
}
<span class="a"><span class="b"> Color 1</span></span>
<span class="b"><span class="a">Different Color 2</span></span>
Обычный тривиальный случай, когда верхний слой имеет opacity:1
, которые составляют верхний цвет с долей 100%; таким образом, это непрозрачный цвет.
Для более точного объяснения вот формула, используемая для расчета цвета, который мы видим после комбинации обоих слоевссылка:
ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor
ColorF — наш окончательный цвет. ColorT/ColorB — это соответственно верхний и нижний цвета. opacityT/opacityB – это соответственно верхняя и нижняя непрозрачность, определенные для каждого цвета:
factor
определяется по этой формуле OpacityT + OpacityB*(1 - OpacityT)
.
Понятно, что если мы поменяем местами два слоя, factor
не изменится (оно останется постоянным), но мы можем ясно видеть, что пропорция для каждого цвета изменится, поскольку у нас разный множитель.
Для нашего исходного случая обе непрозрачности равны 0.5
, поэтому у нас будет:
ColorF = (ColorT*0.5 + ColorB*0.5*(1 - 0.5)) / factor
Как объяснялось выше, верхний цвет имеет пропорцию 50% (0.5
), а нижний — 25% (0.5*(1-0.5)
), поэтому переключение слоев также изменит эти пропорции; поэтому мы видим другой конечный цвет.
Теперь, если мы рассмотрим второй пример, мы будем иметь:
ColorF = (ColorT*0.25 + ColorB*0.333*(1 - 0.25)) / factor
В этом случае у нас есть 0.25 = 0.333*(1 - 0.25)
, поэтому переключение двух слоев не будет иметь никакого эффекта; таким образом, цвет останется прежним.
Мы также можем четко определить тривиальные случаи:
- Когда верхний слой имеет
opacity:0
, формула равна ColorF = ColorB
- Когда верхний слой имеет
opacity:1
, формула равна ColorF = ColorT
person
Temani Afif
schedule
28.05.2018