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

Question

[Genri_Rus]

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

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

Сейчас он заходит за рамки, а как сделать, чтобы фильтр распространялся только на сам элемент ?

Comments

[Рома Зварич]

Градиент распространяется ровно на тот элемент, которому Вы его задали.

За какие именно рамки он не должен выходить?

[Genri_Rus]

Рома Зварич, не градиент, а фильтр

Градиент не заходит за рамки

Я задал body белую обводку в 20px, но фильтр делает эту обводку серым цветом, хотя она должна быть белой у body

Нужно, чтобы фильтр не заходил за белую обводку в 20px

[Genri_Rus]

Рома Зварич, вы можете удалить фильтр и увидите, что белая обводка в 20px станет белой

Answer 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;

Comments

[Genri_Rus]

Спасибо, а как правильней в данном варианте вы бы сделали ?

Допустим, чтобы у .bg-wrapper не было никаких минусов, про которые вы упомянули

[Volito]

Genri_Rus, все зависит от поставленной задачи. Внутри .bg-wrapper создал бы еще один span и ему добавил бы стили .bg-wrapper:before, тогда минусов не было бы.

[Genri_Rus]

Volito, спасибо

Т.е. overflow: hidden тогда не нужно было бы прописывать, а вот что насчет пустоты с точки зрения СЕО ?

Можно просто 0 поставить или все таки нужно переделывать верстку ?

[Volito]

Genri_Rus, Пустой блок в конец поставить и робот будет просто игнорировать. Для чего вообще этот блок? Если вы покажите макет я бы мог еще что-то посоветовать.

[Genri_Rus]

Volito, это для header фон

[Genri_Rus]

Volito, или bg-wrapper сделать в виде обводки ?

Допустим было так <div class="bg-wrapper"></div>

А сделать так:

<div class="bg-wrapper">
     <h1 class="title-head">Заголовок</h1>
</div>

[Volito]

Genri_Rus, так и сделать.