代码之家 › 专栏 › 技术社区 › Diana G

如何阻止过滤器:blur()溢出

css-filters blur css

Diana G · 技术社区 · 7 年前

我试图在同一个图像的顶部设置一个居中的图像,但模糊和拉伸以水平填充。当我应用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/

2 回复 | 直到 7 年前

Kosh 7 年前

您可以这样做:

    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

Temani Afif 7 年前

你需要降低成本 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">

您还可以使用pseudo元素优化代码,这样可以更好地控制代码。

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>