Как выполнить линейное уклонение в CSS?
Проблема:
Дочерний элемент и его контейнер имеют цвет bg с прозрачностью. Если дочерний элемент находится внутри контейнера, цвет дочернего элемента будет вычисляться на основе родительского. Что мне делать, чтобы сохранить прозрачность обоих, сделав цвет дочернего bg точно таким же, как я указал.
Например:
У меня полноэкранное фоновое изображение.
И div с дочерними элементами внутри.
<div class = "container">
<input class = "mask-moderate__input" />
<button class = "mask-moderate__button"></button>
</div>
Каждый из стилей определяет фон rgba.
Это может как-то представить ситуацию. «Цвет 2» слева - это то, что я хочу, потому что я не помещал его в контейнер, и его цвет rgba(90, 90, 90, 0.35) рассчитывается непосредственно на основе фона. Но если я напишу элементы в div (как в строке заголовка), цвет bg будет рассчитываться на основе цвета bg rgba(55, 55, 55, 0.35) div, а это не то, что я хочу.
Возможное решение:
Выполните линейное уклонение. Просто добавьте дельту rgb на основе цвета bg div и оставьте альфа неизменным, так что (55, 55, 55, 0,35) + (35, 35, 35) = (90, 90, 90, 0,35) <- то же самое как «цвет 2» слева.
Заполните
div, но держитесь подальше от определенной области. (Не заполняйте области, где элементы находятся прямо над ними)Скриптовые способы.
Примечание:
Я работаю над проектом Angular 6. Также приветствуются любые решения, выходящие за рамки vanilla JS.
Спасибо!
Заполните контейнер прозрачным цветом, за исключением областей, в которых размещены элементы.
ты можешь нарисовать, как это выглядит?
Извините, что не пояснил. Я обновил картинку и надеюсь, что она поможет прояснить мою цель.
Ответы 1
Я не знаю, ищете ли вы этот ответ или нет.
Если ответ не поможет, дайте мне знать в комментариях, я удалю это.
Но я понимаю, что вы хотите, чтобы ваши дочерние компоненты сохранили свой цвет фона и просто играли с фоном прозрачности родительского с ограничением, что цвет фона дочерних элементов не изменяется.
Ну, этот ответ охватывает вопрос, если и дочерний, и родительский цвет фона не имеют прозрачности. Означает, что он закроет раствор, если у детей сплошной фон, тогда он идеален.
Но если у обоих будет прозрачный фон, вам, возможно, придется сослаться на это:
Вопрос о переполнении стека по дочерней и родительской прозрачности
.flex-container {
display: flex;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
.flex-container > div {
background-image: linear-gradient(to right, rgba(0,255,0,0), rgba(0,0,20,0.3));
margin: 10px;
padding: 20px;
font-size: 30px;
}<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Если сплошной фон дети
.flex-container {
display: flex;
background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1));
}
.flex-container > div {
background-color: #ffff1f;
margin: 10px;
padding: 20px;
font-size: 30px;
}<div class = "flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Спасибо за ответ, но я не думаю, что проблема решена. Я изменил формулировку своей проблемы и надеюсь, что на этот раз она прояснится.
@ZenasChen Вы видели stackoverflow.com/questions/50574524/… Если да? это было полезно?
да. Думаю, mix-blend-mode, упомянутый в вашей ссылке, меня вдохновляет. Возможно, мне придется написать отдельные классы для обработки такого наложения. Тем не менее, я ожидаю более простых решений, в которых я могу использовать только единый набор классов. Спасибо!
@ZenasChen будут различия в цвете, если прозрачность будет рассматриваться как указанная мной ссылка. Также mix-blend-mode удобен в использовании, но будьте осторожны с его поддержкой.
Вы можете уточнить эффект, который ищете?