filters主要是運用在上,以實現一些特效。(儘管他們也能運用於video上),不過我們在些只來討論上的運用。
語法
elm其預設值是none,他不具備繼承性,其中filter-function乙個具有以下值可選:
grayscale灰度
sepia褐色(求專業指點翻譯)
saturate飽和度
hue-rotate色相旋轉
invert反色
opacity透明度
brightness亮度
contrast對比度
blur模糊
drop-shadow陰影
瀏覽器的相容性
下面我們一起來見證這些效果的實現過程,首先在頁面中有一張:
一、grayscale灰度
使用這個特效,會把變成灰色的,也就是說你的將只有兩種顏色「黑色」和「白色」
.grayscale預設值:100%,
如果你在grayscale()中沒有任何引數值,將會以「100%」渲染。其效果下圖所示:
二、sepia
sepia不知道如何譯,暫時就叫他「褐色」,使用這種效果,你的好像很古老的一樣
.sepia預設值:100%,
如果你在sepia()中沒有任引數值,將會以「100%」渲染,具體效果如下:
三、saturate飽和度
saturat是用來改變的飽和度
.saturate預設值:100%,
如果我們將其值變大到300%
四、hue-rotate色相旋轉
hue-rotate用來改變的色相
.hue-rotate預設值:0deg
五、invert反色
invert做出來的效果就像是我們照相機底面的效果一樣
.invert預設值:100%
六、opacity透明度
這個就很好理解了,改變的透明度
.opacity預設值:100%
七、brightness亮度
改變的亮度
.brightness預設值:100%
八、contrast對比度
改變的對比度,整個psd的,都懂這個意思
.contrast預設值:100%
九、blur模糊
一看字面意思就知道了,改變的清晰度
.blur預設值:0
十、drop-shadow陰影
這個很像box-shadow一樣的效果,給加陰影效果
.drop-shadow
.customsay hello to webkit filters
quick fun: css3 filter effects
filter effects 1.0
-webkit-filter是神馬?
css3中Filter的十種特效
css3的filter屬性簡單且強大,本篇是學習css3 filter所做的筆記。grayscale 灰度,值為0 1之間的小數 sepia 褐色 我喜歡叫古風濾鏡 值為0 1之間的小數 saturate 飽和度,值為num hue rotate 色相旋轉,值為angle invert 反色,值為0...
CSS3 filter屬性學習
filter屬性 css3的fliter屬性是乙個強大的工具,開發者可用它實現很多視覺效果 該屬性提拱了如陰影和改變顏色等效果,這些效果的在元素渲染是完成 該屬性通常用於調整的呈現 乙個元素的背景或者邊框。語法 filter me blur npx 設定高斯模糊,傳入乙個畫素單位,表示模糊半徑,預設...
css3 filter濾鏡屬性
css3 filter濾鏡屬性 注 ie瀏覽器暫不支援 1.灰度 grayscale value 值為百分比,在0 到100 之間,值為100 則完全轉為灰度影象,值為0 影象無變化,預設值是0 2.色相 hue rotate value 值為deg角度範圍無限制,色相環當到360deg後會重複0d...