Есть ли способ создать маску с помощью CSS (пример изображения в теле)

Question

Пример изображения, демонстрирующего, что мне нужно

Если вы видите изображение выше, есть родительский контейнер, к которому применено фоновое изображение, которое является градиентом.Он разделен на 2 подраздела, сложенных вертикально.один из этих элементов div содержит красный элемент div и синий элемент div, которые абсолютно расположены.Предполагается, что синий div действует как маска, которая покрывает только содержимое subdiv2.Он привязан к чему-то другому в subdiv2 (не в изображении), поэтому он перемещается, если перемещается это «что-то».Если это происходит, чтобы покрыть красный div, он должен скрывать красный div, сохраняя при этом градиентный фон. Есть ли способ добиться этого с помощью css?

Если градиента не было, Один унаследовал бы цвет фона по цепочке, а синий div просто скрыл бы красный div.Если вы унаследуете background-image, мы получим разделенный градиент в 2 подразделах, что неверно.Если мы сохраним фоны двух подразделов прозрачными, я не знаю, как синий div мог бы скрыть красный div.

Спасибо!

EDIT : Извините зане уточняя ранее.Виноват.Я изменил формулировку, чтобы вы, ребята, понимали тот факт, что синий div не всегда покрывает красный div, в противном случае решение будет простым.

Answer 1

Если родительский div имеет background:transparent, это даст вам желаемый эффект.Самое сложное - это заставить родителей "перед" ребенком.Я смог сделать это, установив отрицательное значение z-index на ребенка, но вам может потребоваться что-то еще.Не видя твоей разметки, я не могу быть уверен.

document.getElementById('toggle').onclick = () => {
  const inner = document.getElementById('inner');
  const style = window.getComputedStyle(inner);
  const index = style.getPropertyValue('z-index');
  document.getElementById('inner').style.zIndex = index === "-1" ? "0" : "-1";
}

.bg {
  width:600px;
  height:400px;
  background:url(http://placekitten.com/600/400);
}

.div1 {
  height:200px;
  border: 2px solid red;
}

.div2 {
  position:relative;
}

.subdiv2 {
  position:absolute;
  left:40%;
  top:80px;
  height:80px;
  width:200px;
  border: 2px solid blue;
  background:transparent;
}

#inner {
  position:absolute;
  top:10px;
  left:80px;
  width:60px;
  height:60px;
  background:red;
  z-index:-1;
}

<div class="bg">
  <div class="div1"></div>
  <div class="div2">
    <div class="subdiv2">
      <div id="inner"></div>
    </div>
  </div>
</div>
<button id="toggle">toggle z-index</button>

Answer 2

z-index кажется плохим решением этой проблемы.Вы МОЖЕТЕ анимировать значение z-index, НО это все равно будет выглядеть довольно забавно, так как элементы изменяют глубину и переходят друг в друга.

Если цель состоит в том, чтобы визуально «скрыть» контент с его родительским фоном, не является ли прозрачность тем же результатом? Или я что-то упускаю из этой цели?

Я хотел бы предложить:

// hidden state
.redDiv {
 opacity:0;
 transition: opacity 0.5s linear;
}

// visible state
.redDiv.visibleState {
 opacity:1;
}

Вы можете сделать реальное маскирование в CSS , но я склоняюсь к тому, чтобы зарезервировать его для сложных форм.

Answer 3

Вы можете проверить этот пример. Вы можете использовать

background: inherit

на синем div после установки z-index красного div как -1.

Использование фонового наследования для синего div поможет ему не потерять прозрачность и исчезнет красный div.И использование z-index: -1 на красном div будет толкать его за синим div.