Как сделать чтобы блоки не красились при наложении?

Question

[Влад ~]

Нужно чтобы блоки не перекрашивались при перекрытии Сделал вот так
Пробовал юзать mix-blend-mode, но не помогло есть ли какой-то способ сделать чтобы цвет был однородный даже при перекрытии?

Comments

[Maxim Kirshin]

используй rgb, а не rgba. Ну или hex. Пример твоего цвета - #ccc

[Влад ~]

На реальном проекте нужна прозрачность ибо за этими полосками текст

[Ankhena]

Влад ~, покажите весь пример и как там должен выглядеть текст.

Answer 1

[Ankhena]

Сделать вот так https://jsfiddle.net/hwvgdton/
Для гладкости подберите точки перехода градиента.
И, наверное, вам понадобится pointer-events

div {
  position: relative;
}
div::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to left top, transparent calc(50% - 51px), gray calc(50% - 50px), gray calc(50% + 50px), transparent calc(50% + 51px)),
  linear-gradient(to right top, transparent calc(50% - 51px), gray calc(50% - 50px), gray calc(50% + 50px), transparent calc(50% + 51px));
  opacity: 0.7;
}

Answer 2

[Арсений Матыцин]

Не использовать прозрачность.

Comments

[Влад ~]

На реальном проекте нужна прозрачность ибо за этими полосками текст

[Арсений Матыцин]

Влад ~, да, это, пожалуй, стоит добавить в описание квеста.

Поэтому да, ниже Ankhena описала живой вариант. Помимо него можно использовать SVG для управляемости, правда она же может обернуться против тебя. Или clip-path. В конце-концов картинку с прозрачностью (в том числе SVG). К слову, с псевдоэлементами абсолютного позиционирования такое тоже можно провернуть.

Но без pointer-events: none ты пролюбишь доступ к тексту.