要在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错误