@Genri_Rus

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

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

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

Сейчас он заходит за рамки, а как сделать, чтобы фильтр распространялся только на сам элемент ?
  • Вопрос задан
  • 384 просмотра
Решения вопроса 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;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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