最近發現了一個非常強大的CSS3屬性,就是filter(濾鏡)屬性,喜歡p圖的朋友看名字都應該知道這是什麼神器了吧。當然,這個屬性的效果絕對不能跟ps相比,但利用的好的話可以在節約很多空間下,把一張圖做成兩張圖的效果。本文主要介紹了詳解CSS3中強大的filter(濾鏡)屬性的相關資料,需要的朋友可以參考下,希望能幫助到大家。
1、定義
filter,從字面意思來看就是濾鏡,官方定義filter屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度);舉個栗子:
<style> img{ /*灰度100%*/ -webkit-filter:grayscale(100%); } </style> <img src="img/boke.png" alt="">
看到這個效果,博友們是不是都開始對filter開始感興趣了呢?
2、語法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
#可以看到,屬性有很多可選值,他們都是什麼意思呢?
grayscale灰階
sepia褐色(有種復古的舊照片感覺)
saturate飽和度
hue-rotate色相旋轉
invert反色
opacity透明度
brightness亮度
contrast對比
blur模糊
drop-shadow陰影
舉個栗子:
#這裡用sepia調整
<head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ -webkit-filter:sepia(70%); } </style> </head> <body> <img src="img/boke.png" alt=""> <img class="img" src="img/boke.png" alt=""> </body>
範例圖片:
#
3、範例
下面,對filter屬性的其中幾個值做一個範例,其他好玩的東西需要博友們一起發掘,有啥好玩的可以跟我一起分享喲
(1)hue-rotate(色彩旋轉)
效果看圖吧,具體使用效果要靠大家發掘:
<style> .img{ -webkit-filter:hue-rotate(330deg); } </style> </head> <body> <img src="img/boke.png" alt=""> <img class="img" src="img/boke.png" alt=""> </body>
效果圖:
(2)blur(模糊)
blur(模糊效果,單位px)
<style> .img{ -webkit-filter:blur(1px); } </style> <body> <img src="img/boke.png" alt=""> <img class="img" src="img/boke.png" alt=""> </body>
範例圖片:
#
(3)invert反色
invert反色會吧圖片變成底片的感覺,多說無益,看程式碼:
<style> .img{ -webkit-filter:invert(100%); } </style> <body> <img src="img/boke.png" alt=""> <img class="img" src="img/boke.png" alt=""> </body>
範例圖:
大家覺得好玩嗎?趕快動手嘗試。
相關建議:
css filter濾鏡的實例講解_html/css_WEB-ITnose
以上是詳解CSS3的filter濾鏡屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!