img { filter: blur(5px); }
上面的代码中,使用了blur()函数来实现图片模糊。括号中的数字表示模糊程度,数字越大则模糊程度越高。
除了blur()函数,还有其他的滤镜函数可以使用,例如:
- grayscale() 使图片灰度
- brightness() 调整图片的亮度
- contrast() 调整图片的对比度
img { filter: grayscale(100%); filter: brightness(50%); filter: contrast(200%); }
需要注意的是,CSS的filter属性在一些老旧的浏览器中可能无法支持,因此在实际使用的过程中需要进行兼容性处理。