Как остановить фильтр: размытие () от переполнения - PullRequest
Новая
       31

Как остановить фильтр: размытие () от переполнения

0 голосов
/ 02 декабря 2018

Я пытаюсь установить центрированное изображение поверх того же изображения, но размытое и растянутое для горизонтального заполнения.Когда я применяю фильтр: blur () фоновое изображение «переполняется», когда оно превышает высоту исходного изображения.

The blue part should be white

<div class="blurred">

</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">

img{
  height:300px;
  margin:auto;
  position:relative;
  display:block;
}


.blurred{
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg');
  filter:blur(30px);
  width:100%;
  height: 300px;
  position: absolute;
}

Вот скрипка: https://jsfiddle.net/gw9krd2n/

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Вы можете сделать это так: 

    img {
      position: relative;
      top:-5%; left:-5%; z-index: -1;
      width:110%; height:110%;
      filter: blur(20px);
    }

    .blurred {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      background: transparent url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg') no-repeat 50% / auto 100%;
    }
<div class="blurred">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>

JSFiddle здесь

0 голосов
/ 02 декабря 2018

Вам нужно уменьшить 30px фильтра сверху добавить снизу.Я добавил несколько полей для лучшего просмотра. 

img{
  height:300px;
  margin:20px auto;
  position:relative;
  display:block;
}


.blurred{
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg');
  filter:blur(30px);
  margin:50px auto;
  width:100%;
  height: calc(300px - 60px);
  position: absolute;
}
<div class="blurred">

</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">

Вы также можете оптимизировать код с помощью псевдоэлемента, и у вас будет лучший контроль. 

img {
  height: 300px;
  margin: auto;
  display: block;
}

.blurred {
  position: relative;
  margin:30px 0;
  z-index:0;
}

.blurred:before {
  content: "";
  position: absolute;
  z-index:-1;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg');
  filter: blur(30px);
  top: 30px;
  bottom: 30px;
  width: 100%;
}
<div class="blurred">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>

Вы также можете ввести переменную CSS для большей гибкости: 

img {
  height: 300px;
  margin: auto;
  display: block;
}

.blurred {
  position: relative;
  margin:30px 0;
  z-index:0;
}

.blurred:before {
  content: "";
  position: absolute;
  z-index:-1;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg');
  filter: blur(var(--f,20px));
  top: var(--f,20px);
  bottom: var(--f,20px);
  width: 100%;
}
<div class="blurred" style="--f:30px">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>
<div class="blurred" style="--f:50px">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>

Используя метод псевдоэлемента, вы также можете просто скрыть переполнение: 

img {
  height: 300px;
  margin: auto;
  display: block;
}

.blurred {
  position: relative;
  margin:30px 0;
  z-index:0;
  overflow:hidden;
}

.blurred:before {
  content: "";
  position: absolute;
  z-index:-1;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg');
  filter: blur(20px);
  top:0;
  bottom:0;
  width: 100%;
}
<div class="blurred" >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Sunset_2007-1.jpg/1280px-Sunset_2007-1.jpg">
</div>
...