css3支持的濾鏡有哪些

這篇文章主要為大家展示了“css3支持的濾鏡有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css3支持的濾鏡有哪些”這篇文章吧。

css3支持的濾鏡是由filter屬性定義的可視效果，包括：1、模糊濾鏡，可給圖像設置高斯模糊；2、亮度濾鏡；3、對比度濾鏡；4、投影濾鏡；5、灰度濾鏡；6、色相旋轉濾鏡；7、反轉圖像濾鏡；8、透明度濾鏡；9、飽和度濾鏡；10、深褐色濾鏡。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3支持的濾鏡是由filter屬性定義的可視效果。

filter屬性可設置的函數（可視效果）

1、模糊濾鏡（px）

給圖像設置高斯模糊。值越大越模糊，默認是0，就是不模糊。

filter:blur(4px);

2、亮度濾鏡（%）

給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。

 filter: brightness(200%);

3、對比度濾鏡（%）

調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。

 filter: contrast(200%);

4、投影濾鏡(x偏移 y偏移 模糊范圍 顏色)

與 box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。

 filter: drop-shadow(8px 8px 10px red);

5、灰度濾鏡(%)

將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。若未設置，值默認是0。也可以寫0-1之間的小數。

 filter:grayscale(0.5);

6、色相旋轉濾鏡(deg)

給圖像應用色相旋轉。讓圖像中的顏色，在色相環中做對應的旋轉。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。

 filter: hue-rotate(90deg);

7、反轉圖像濾鏡(%)

反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。

 filter: invert(100%);

8、透明度濾鏡(%)

圖像的透明程度。值為0%則是完全透明，值為100%則圖像無變化。0-100%之間則是部分透明。也可以用0-1之間的小數替代%。
與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。

 filter: opacity(30%);

9、飽和度濾鏡(%)

值為0%則是完全不飽和，值為100%則圖像無變化。大于100%，則飽和度增高，色彩就會變重。

 filter: saturate(800%);

10、深褐色濾鏡(%)

將圖像轉換為深褐色。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。

 filter: sepia(100%);

使用代碼：

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

以上是“css3支持的濾鏡有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！