https://www.cnblogs.com/ghost-xyx/p/5677168.html
核心代码
.content {
background-position: center top;
background-size: cover;
}
.content::after {
background-image: url(xxx.jpg);
background-position: center top;
background-size: cover;
background-attachment: fixed;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
}
美中不足的是在元素的边缘模糊的效果减弱了,解决办法
.content {
overflow: hidden;
}
.content::after {
margin: -30px;
}

本文介绍了一种在CSS中实现背景图片模糊效果的方法,并解决了边缘模糊减弱的问题。通过使用伪元素和适当的属性设置,可以创建出美观且效果一致的背景模糊效果。
1万+

被折叠的 条评论
为什么被折叠?



