css filter濾鏡的實例講解

因爲css3的filter濾鏡能夠實現對對普通圖像和SVG圖像進行特效渲染,功能十分強大,因此今天特地把filter濾鏡的用法進行大體的總結

語法:

element {
        filter: none | <filter-function > [ <filter-function> ]* 
      }
        
<img class="grayscale" width="300" height="185" src="image.jpg">

.grayscale {
    filter: graycale(1);
    //灰度屬性
    //可填寫範圍0~1,默認值爲0,即灰度不改變
}

---

上面介紹了第一種濾鏡: grayscale(灰度)

下面介紹接下來的九種濾鏡

2.blur()高斯模糊

使用:該方法將周圍像素點值求和取平均即爲該點像素值
參數:此屬性接受參數接受長度值,默認值爲0

.blur {
    filter: blur(1px)
}

效果:

3.brightness()亮度

使用: 該方法調節圖片的亮度
參數: 默認值爲1,但所填寫值能夠大於1,此時圖像亮度會繼續加強

.brightness {
    filter: brightness(0.6)
}

效果圖:

4.contrast對比度

使用: 經過調節對比度使亮處更亮,暗處更暗
參數: 默認值爲1,最小值爲0,無最大值

.contrast{
    filter: contrast(150%)
}

效果圖:

5.drop-shadow設置陰影

使用: 使用效果與box-shadow相似,但瀏覽器可能會提供加速
參數: 第一二個值是偏移量(容許負值) , 第三個參數表示模糊程度(不容許負值),第四個參數表示顏色

.drop-shadow{
    filter: drop-shadow(20px, 20px, 10px, black)
}

效果圖:

6.hue-rotate色相

使用: 用於改變色相(即具體像素的數值)
參數: 用角度表示,當數值爲360deg時,圖像不變

.hue-rotate{
    filter: hue-rotate(90deg)
}

效果圖:

7.invert()圖像反轉

使用: 對圖像進行顏色上的反轉
參數: 默認值是0,最大值是1

.invert{
    filter: invert(100%)
}

效果圖:

8.opacity透明度

使用: 此樣式相似於opacity屬性
參數: 0%~100%

.opacity {
    filter: opacity(50%)    
}

效果圖:

9.saturate()飽和度

使用: 轉換圖像飽和度
參數: 默認值是100%, 但超過100%的值是容許的

.saturate{
    filter: saturate(200%)
}

效果圖:

![    圖片描述][9]

10.sepia褐色加深(會產生一種老照片的感受)

使用: 將圖像轉換爲褐色
參數: 默認值爲0,範圍是0~1

.sepia{
    filter: sepia(100%)
}

效果圖

11.進行圖像的複合處理,能夠對圖像進行任意的組合以得到想要的結果

.mixture{
    filter:brightness(1.2) contrast(1.2)
}

效果圖:

經過filter屬性你能夠把你喜歡的圖片很是容易地修改爲易用的樣式

---

......每每會把一件完整的東西化成無數的形象,就像凹凸鏡通常,從正面望去,只見一片模糊.

                       --莎士比亞