css3的濾鏡filter屬性，可以對網頁中的圖片進行類似Photoshop圖片處理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。

一、blur(px)高斯模糊

二、brightness(%)亮度

三、contrast(%)對比度

四、drop-shadow()陰影

---

注意： 這個 drop-shadow 與 box-shadow 都是在說陰影，但還是有區別的，看下圖

圖中火焰的圖片，是一張png圖片，除了火焰以外，其他部分是透明的，我們能看見，box-shadow 是給整個圖片加陰影，而 drop-shadow 只是給不透明的部分加陰影，這是他們最重要的區別了。

五、grayscale(%)灰度

六、hue-rotate(deg)色相旋轉

七、invert(%)反轉

八、opacity(%)透明度

九、saturate(%)飽和度

十、sepia(%)深褐色

上面都只是把每種濾鏡單獨拿出來，展示效果，但是其實他們是可以一起使用的，比如這樣

.all img{filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000); }

注：飽和度和對比度是兩個完全不同的概念，飽和對是對色彩的濃度（純度）的定義；對比度是對畫面明暗程度的定義。
理論上說，對比度是指畫面黑白明暗的層次；飽和度畫面中色彩的鮮艷程度與層次；

轉載于:https://www.cnblogs.com/hellocd/p/filter.html

總結

以上是生活随笔為你收集整理的CSS3的滤镜filter属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。