可以使用CSS中的filter属性来控制页面元素的滤镜效果。以下是一些常用的滤镜效果:
可以使用blur()函数来实现模糊效果。值越大,模糊程度越高。
.blur { filter: blur(5px); }
可以使用invert()函数来实现反转效果。值为100%时完全反转。
.invert { filter: invert(100%); }
可以使用grayscale()函数来实现灰度效果。值为100%时完全灰度。
.grayscale { filter: grayscale(100%); }
可以组合多个滤镜效果来实现更复杂的效果。
.filter { filter: blur(3px) grayscale(50%) brightness(150%); }
注意:filter属性并不是所有浏览器都支持。在使用filter属性时,建议使用浏览器厂商的前缀来兼容不同的浏览器。
另外,使用滤镜效果会增加页面渲染的负担,尽量不要过度使用。