如何阻止filter：blur（）溢出

Question

我正在尝试将居中图像设置在同一图像的顶部，但会模糊并拉伸以水平填充。当我应用filter：blur（）时，背景图像会“溢出”，因为它超出了原始图像的高度。

<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/

Answer 1

您需要从上至下减少过滤器的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>

Answer 2

您可以这样做：

    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 is here