要实现背景模糊的效果,可以使用以下两种方法之一:
一、使用CSS的backdrop-filter属性,该属性可以对背景进行模糊处理。需要注意的是,这个属性目前只支持部分浏览器,如Safari 9+和iOS 9+、Chrome 76+等。
示例代码:
.container { background-image: url("bg-image.jpg"); backdrop-filter: blur(10px); }
二、将要模糊的内容放在另一个元素中,并使用position定位使其覆盖在原来的区域上。然后对该元素应用模糊效果。
示例代码:
.container { position: relative; background-image: url("bg-image.jpg"); }
.blur-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(10px); }
.content { position: relative; z-index: 1; }
以上两种方法中,推荐使用第二种方法,因为它支持更多的浏览器,并且更加可靠。