如何阻止 filter:blur() 溢出
How to stop filter:blur() from overflowing
我正在尝试在同一图像的顶部设置居中图像,但模糊和拉伸以水平填充。当我应用 filter:blur() 背景图像时 "overflows" 因为它超过了原始图像的高度。
<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;
}
这是 fiddle:https://jsfiddle.net/gw9krd2n/
您需要减少过滤器的 30px
从顶部添加底部。我添加了一些 margin-top 以便更好地查看。
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>
你可以这样做:
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>
我正在尝试在同一图像的顶部设置居中图像,但模糊和拉伸以水平填充。当我应用 filter:blur() 背景图像时 "overflows" 因为它超过了原始图像的高度。
<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;
}
这是 fiddle:https://jsfiddle.net/gw9krd2n/
您需要减少过滤器的 30px
从顶部添加底部。我添加了一些 margin-top 以便更好地查看。
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>
你可以这样做:
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>