css 模糊背景图 |嵌入式css写法

要实现模糊背景图，大家需要借助CSS中的filter属性。该属性可以对元素应用图形效果（如模糊、对比度变化等），从而改变元素的外观。在这里，大家主要使用blur（模糊）效果来实现模糊背景图的效果。

background-image: url("example.png");
filter: blur(5px);

上面的代码片段中，大家首先指定了背景图所在的URL，然后在filter属性中加入了blur效果，其中5px指的是模糊程度，可以根据需要进行调整。需要注意的是，filter属性的使用前提是必须设置了background-image属性，否则无法实现模糊背景图的效果。

另外，还有一些小技巧可以让大家更好地应用模糊背景图。比如可以对背景图进行旋转、放大缩小等操作，从而增加视觉上的层次感。下面是一段示例代码：

background-image: url("example.png");
filter: blur(5px) grayscale(50%);
transform: rotate(5deg) scale(1.2);

在这段代码中，大家除了使用了blur滤镜外，还增加了grayscale滤镜（可以将图片变为黑白效果），并对元素进行旋转和缩放操作。这些技巧，可以让大家在实现模糊背景图的同时，提升页面的视觉效果。