CSS如何设置背景模糊周边有白色光晕(解决方案)
发布时间：2024-03-20 16:11:17 作者：蓓蕾心晴 
我要评论
我要评论想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩，这篇文章主要介绍了CSS如何设置背景模糊周边有白色光晕(解决方案),需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
css设置背景模糊周边有白色光晕，如何解决？
<div class="img-box">
<img :src="http://9i0i.com/pic.php?p=xxx.png">
<div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div>
</div>.img-box {
width: 100%;
height: 212px;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
position: relative;
z-index: 5;
}
.img-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 200%; /* 放大两倍 */
background-position: center;
background-repeat: no-repeat;
filter: blur(20px); /* 添加20模糊效果 */
overflow: hidden;
}
.img-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
z-index: 1; /* 确保蒙层在背景之上 */
}
}需求：想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩
但是按照上面代码实现后，周边有一圈白色光晕，如图：
解决方案：
使用backdrop-filter: blur(20px);
但是注意，backdrop-filter 不能直接加在背景图本身样式上，会导致不生效。
backdrop-filter属性需要在具有定位的元素上使用，例如position: relative或position: absolute；backdrop-filter应用于的元素需要有一个背景元素在其后，通常是该元素的父级元素。如果没有这样的背景元素，backdrop-filter将不会生效。确保父级元素有可见的背景内容。
所以我们将backdrop-filter 放在 img-bg::before 里，即可生效：
.img-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
z-index: 1; /* 确保蒙层在背景之上 */
backdrop-filter: blur(20px); /* 添加20模糊效果 */
}
这样就白色光晕的效果了。
到此这篇关于CSS如何设置背景模糊周边有白色光晕的文章就介绍到这了,更多相关css背景模糊内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-22
最新评论