Неожиданное поведение непрозрачности - PullRequest
Новая
       11

Неожиданное поведение непрозрачности

0 голосов
/ 24 января 2019

Я изо всех сил пытался понять взаимодействие CSS в проекте, над которым я работал. Вот кодовый блок, воссоздающий его и CSS, который я использовал.

Codepen 

.container
  /*background is set to emulate the real use case*/
  background red
  height 400px
  width 600px
  position relative
  display flex
  justify-content center
  align-items center
  opacity 0.9
.blurred
  background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
  height 100%
  width 100%
  position absolute
  filter blur(7px)
  z-index -1
.text
  font-size 35px
  text-transform uppercase
  color brown
  /*this div is for comparison.
    at 0.9 opacity the white background under it is 
    not visible yet the image under .container is clearly
    visible at 0.9 opacity */
.comparison
  height 400px
  width 600px
  background red
  opacity 0.9

Идея в том, что я хочу, чтобы к нему было применено изображение с размытостью, а также текст поверх него, который не был бы размытым. .Container технически не нуждается в наборе цвета фона, но ради воссоздания проблемы именно так, как я с ней столкнулся, я установил его цвет фона на красный.

Так что, насколько я понимаю, уменьшение непрозрачности на .container делает .container и всех его дочерних элементов более прозрачными. То есть, чем ниже, тем легче увидеть белый фон под всеми элементами. Я не понимаю, почему прозрачность также делает .container полностью прозрачным. Я могу четко видеть фоновое изображение через него. Я ожидал, что контейнер будет заполнен красным цветом и едва показывает изображение внутри. Вместо этого .container не имеет цвета заливки, и я четко вижу изображение.

Я сделал еще один div для сравнения. Это просто div с непрозрачностью 0,9 и больше ничего. Он не теряет свой цвет фона, как .container.

Надеюсь, я достаточно подробно объяснил свой вопрос. Я уже несколько дней пытаюсь обернуть это вокруг головы!

Ответы [ 3 ]

0 голосов
/ 24 января 2019

Когда вы устанавливаете фоновое изображение класса .banner, этот элемент находится поверх цвета фона. Причина, по которой ваш сравнительный элемент не теряет столько цвета, заключается в том, что перед фоновым цветом ничего нет. Если вы установите непрозрачность .blurred, чтобы уменьшить его непрозрачность и сместить конкуренцию, вы получите желаемый эффект.

0 голосов
/ 24 января 2019

Если вы хотите, чтобы красный фоновый фон «лежал сверху» на размытом фоновом изображении, вы можете попробовать добавить его как градиентное «изображение», например: 

background-image linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,.9)), url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
0 голосов
/ 24 января 2019

Фоновый цвет идет за содержимым, а не сверху, поэтому его называют «задним» фоном. Таким образом, ваш красный фон позади ваших .blurred и .text.

...