687      阿裏雲  技術社區[雲棲]

巧用CSS3濾鏡實現圖片不同渲染效果

本站在首頁文章封麵圖從無色轉變為有色，以及頁麵切換、發布留言等信息提示的背景模煳都利用到了css3的filter濾鏡。

CSS3 Filter是W3C CSS filter Effect 1.0中定義的濾鏡，一個使用CSS來改變圖片和HTML的模煳度、亮度、對比度、飽和度等等效果的過濾器。

目前有grayscale、blur、invert、saturate等10個filter-function。
filter屬性目前支持的瀏覽器較少，chrome，Firefox基本都支持了，IE隻有EDGE(這個算IE嗎)部分支持。具體兼容性請自行測試一下。這裏的Demo在chrome（47.0.2526.80），Firefox（43）上測試通過。先來看一下https://caniuse.com/的兼容性評測：

filter主要用於圖片，SVG等元素上，其默認值是none，有以下10個filter-function值可選：

• grayscale（灰度）效果類似於PS中的去色或者黑白
• blur（模煳）效果類似於PS中的高斯模煳
• invert（反相）效果類似於PS中的反相
• opacity（透明度）效果類似於PS中的圖層不透明度
• saturate（飽和度）效果類似於PS中的飽和度
• brightness（亮度）效果類似於PS中的亮度
• contrast（對比度）效果類似於PS中的對比度
• drop-shadow（陰影）效果類似於PS中的投影
• sepia（懷舊）效果類似於相機中的老照片濾鏡
• hue-rotate（色相）效果類似於PS中的色相+旋轉（不知道怎麼說）

DEMO

GRAYSCALE（灰度）

.filter-grayscale{
     -webkit-filter : grayscale(1);
     filter : grayscale(1);
}

BLUR（模煳）

.filter-blur{
     -webkit-filter : blur(3px);
      filter : blur(3px);
}

INVERT（反相）

.filter-invert{
    -webkit-filter : invert(1);
    filter : invert(1);
}

OPACITY（透明度）

.filter-opacity{
     -webkit-filter : opacity(.3);
     filter : opacity(.3);
}

SATURATE（飽和度）

.filter-saturate{
     -webkit-filter : saturate(.3);
     filter : saturate(.3);
}

BRIGHTNESS（亮度）

.filter-brightness{
    -webkit-filter : brightness(.3);
    filter : brightness(.3);
}

CONTRAST（對比度）

.filter-contrast{
    -webkit-filter : contrast(3);
    filter : contrast(3);
}

DROP-SHADOW（陰影）

.filter-drop-shadow{
    -webkit-filter : drop-shadow(5px 3px 7px #888);
    filter : drop-shadow(5px 3px 7px #888);
}

SEPIA（懷舊）

.filter-sepia{
    -webkit-filter : sepia(1);
     filter : sepia(1);
}

HUE-ROTATE（色相）

.filter-hue-rotate{
    -webkit-filter : hue-rotate(135deg);
    filter : hue-rotate(135deg);
}

DEMO

最後更新：2017-11-03 10:34:32

  上一篇：  看懂前端腳手架你需要這篇WEBPACK

  下一篇：  MONGOOSE簡要API