@Genri_Rus

Как сделать, чтобы фильтр не накладывался на другие блоки?

Проблема возникла в следующем: https://codepen.io/Genri_Rus/pen/wvwRyza

Нужно наложить градиентный фильтр на определённую область, чтобы он не заходил за рамки (border 20px)

Сейчас он заходит за рамки, а как сделать, чтобы фильтр распространялся только на сам элемент ?
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
@Volito
Один из вариантов:
.bg-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:-1;  
  background: #0F2027;
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027);  
  filter: blur(150px);  
  opacity: 0.8;
}

Из минусов что у .bg-wrapper появляется ограничения overflow: hidden;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Проблема в том, что элемент .bg-wrapper, которому Вы задали свойство фильтра, абсолютно позиционирован.
При этом, среди родительских элементов нет элемента с НЕстатическим, а, например, относительным позиционированием, на основании которого позиционировался бы текущий.
Поэтому он позиционируется относительно всей области просмотра.

Чтобы это исправить, задайте, например, элемент .container свойство position: relative;. И тогда не будет перекрываться border элемента <body>

P.S. Это немного сломает Вашу вёрстку, потому что она содержит немало ошибок.

Результат:
https://codepen.io/hisbvdis/pen/BaBvYEQ
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 окт. 2019, в 00:09
3500 руб./за проект
21 окт. 2019, в 22:35
500 руб./за проект