要在CSS中实现背景图模糊,可以使用CSS的filter属性和backdrop-filter属性。
filter属性:.blur-background {
background-image: url('image.jpg'); /* 背景图路径 */
filter: blur(5px); /* 模糊效果,5px可以根据需要调整 */
}
backdrop-filter属性(只适用于一些现代浏览器):.blur-background {
background-image: url('image.jpg'); /* 背景图路径 */
backdrop-filter: blur(5px); /* 模糊效果,5px可以根据需要调整 */
}
在以上示例中,.blur-background是一个自定义的类名,你可以根据需要自行命名。将这个类名应用到你想要模糊背景图的HTML元素上即可。
注意:filter属性和backdrop-filter属性都会应用于元素的所有子元素。如果你只想要背景图模糊而不影响子元素,可以使用绝对定位将背景图放置于一个单独的元素中,并将模糊效果应用于该元素。
上一篇:背景图模糊
下一篇:背景图片报告了404错误