Igness_Music
@Igness_Music

Элементы, находящиеся рядом с друг другом, при наличии opacity просвечивают друг друга. Как справится с этим?

Есть 4 рядом стоящих блока с разным z-index. При отсутствии у них opacity - они друг друга правильно перекрывают, но если его добавить, начинают просвечивать друг друга, как на скриншоте. Как справится с ситуацией?

prntscr.com/9ia2i6

Необходимо, чтобы опасити остался, но чтоб блок, с более высоким z-index не просвечивал в блок с более низким.

Вариант с двумя картинками рассмотрен и будет использован если других вариантов не будет. Нужно решение с использованием css/js и при наличии только одной непрозрачной картинки.
  • Вопрос задан
  • 340 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Фотошоп не нужен. Прозрачность не нужна.

Берете такую разметку

div>img
div>img
div>img

и примерно такие стили

div::after { rgba(цвет фона, прозрачность); pos:a; }

и управляете при наведении прозрачностью наложенного поверх картинки псевдоэлемента
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Сделать opacity на весь контейнер, а не на отдельные блоки
Ответ написан
@mletov
Ну если ориентироваться на этот скриншот prntscr.com/9iad8g, и задний фон всегда монохромный без узоров и градиентов, то opacity вообще не нужен. Отрисовать каждый кружок в 2 состояниях, активный и пассивный, а при наведении играться с z-index и src
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы