Как выполнить линейное уклонение в CSS? - PullRequest
Новая
       10

Как выполнить линейное уклонение в CSS?

0 голосов
/ 09 сентября 2018

Проблема:

Дочерний элемент и его контейнер имеют цвет 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 div rgba(55, 55, 55, 0.35), а это не то, что мне нужно. enter image description here

Возможное решение:

  1. Выполнить линейное уклонение. Просто добавьте дельту rgb, основанную на цвете bg div, и оставьте альфа неизменной, так что (55, 55, 55, 0.35) + (35, 35, 35) = (90, 90, 90, 0.35) <- то же самое как «цвет 2» слева. </p>

  2. Заполните div, но не допускайте определенной области. (Не заполняйте области, где элементы находятся прямо выше)

  3. Сценарий.

Примечание:

Я работаю над проектом Angular 6. Любое решение из области применения Vanilla JS также приветствуется.

Спасибо!

1 Ответ

0 голосов
/ 09 сентября 2018

Я не знаю, является ли это ответом, который вы ищете или нет.
Если ответ не поможет, пожалуйста, дайте мне знать в комментариях, я удалю это.

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

Но если у обоих будет фон прозрачности, вам, возможно, придется отнести это:
Вопрос переполнения стека о прозрачности дочерних и родительских элементов 

.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>
...