Проблема в том, что режим смешивания-наложения: Lighten очевидно не ограничивается только цветом фона элемента. Он влияет на все внутри элемента и, следовательно, делает все темное прозрачным.
Есть ли способ обойти эту проблему, например, исключить элементы из режима смешивания-наложения или альтернативное решение для достижения эффекта «дырокола» без использования режимов наложения?
Я хотел бы, чтобы решение было гибким, чтобы вы могли иметь несколько отверстий в одной строке и избегать необходимости вручную «заполнять» отверстия.
Ссылка на скрипт: https://jsfiddle.net/qz1frsp3/
Код: Выделить всё
section {
background: white;
padding: 100px;
mix-blend-mode: lighten;
}
.hole {
margin: 0 auto;
width: 50%;
background: black;
}
body {
text-align: center;
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
color: white;
}Код: Выделить всё
This section's background should be transparent thanks to mix-blend-mode: lighten
Problem is, images get made semi-transparent too :(
[img]https://images2.imgbox.com/b6/d1/BG2LLvw4_o.jpg[/img]
Подробнее здесь: https://stackoverflow.com/questions/798 ... de-lighten
