CSS3 濾鏡 webkit-filter詳細(xì)介紹及使用方法
我要評(píng)論大家可能對(duì)Instagram 這款iPhone APP 上的濾鏡效果很感興趣，其實(shí) CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它。
-webkit-filter 的用法-webkit-filter 用法是標(biāo)準(zhǔn)的 CSS 寫法，如：
-webkit-filter: blur(2px);
-webkit-filter 支持的效果有：
blur 模糊
brightness 亮度
contrast 對(duì)比度
drop-shadow 陰影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 飽和度
hue-rotate 色相旋轉(zhuǎn)
下面是這幾種濾鏡具體的效果和代碼，請?jiān)谧钚碌?Safari 和 Chrome 瀏覽器上查看效果：
原圖
blur 模糊-webkit-filter:blur(2px);
brightness 亮度-webkit-filter:brightness(25%);
contrast 對(duì)比度-webkit-filter: contrast(50%);
drop-shadow 陰影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
opacity 透明度-webkit-filter: opacity(50%);
grayscale 灰度-webkit-filter: grayscale(80%);
sepia 褐色
-webkit-filter: sepia(100%);
invert 反色-webkit-filter: invert(100%);
hue-rotate 色相旋轉(zhuǎn)-webkit-filter:hue-rotate(180deg);
saturate 飽和度-webkit-filter: saturate(1000%);
相關(guān)文章
詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用
這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友2020-08-24
通過css3的filter濾鏡改變png圖片的顏色的示例代碼
本方法是通過CSS3濾鏡 filter 中的 drop-shadow 將png圖片的非透明部分生成任意顏色的投影，然后將原始圖片隱藏起來，從而達(dá)到改變圖片顏色的目的，代碼簡單易懂，對(duì)CSS改2020-05-06
這篇文章主要介紹了CSS3 中filter（濾鏡）屬性使用，本文通過實(shí)例代碼截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-07
jquery和CSS3圖片排序過濾搜索插件Filterizr
Filterizr是一個(gè)jquery和CSS3圖片排序過濾插件?？蓪?duì)一組圖片進(jìn)行排序，按條件過濾和按關(guān)鍵字搜索，歡迎下載2017-07-19
這篇文章主要介紹了詳解CSS3中強(qiáng)大的filter(濾鏡)屬性的相關(guān)資料,需要的朋友可以參考下2017-06-29使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
CSS3的blur屬性可以將圖片加上模糊濾鏡的效果,下面我們就來詳細(xì)看一下使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法,需要的朋友可以參考下2016-07-08使用Filters濾鏡彌補(bǔ)CSS3的跨瀏覽器問題以及兼容低版本IE
跨瀏覽器兼容性是網(wǎng)頁制作永恒的難題,所以在未來一段時(shí)間里，樣式表里的-moz-，-webkit-，(-ms-,-o-)等等前綴將長期存在,除了考慮各家瀏覽器之間的兼容性外，我們還有必要2013-01-23css3背景圖片透明疊加屬性cross-fade簡介及用法實(shí)例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性，一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以2020-11-30
