圖片新增CSS濾鏡和SVG濾鏡實現模糊陰影等效果
CSS濾鏡
什麼是CSS濾鏡
CSS濾鏡(filter)屬提供的圖形特效,像模糊,銳化或元素變色。過濾器通常被用於調整圖片,背景和邊界的渲染。
簡而言之,就是在CSS中提供了一些已經預定義的屬性或函式,實現影象的模糊、變色等效果。
函式
blur()
給影象設定高斯模糊,值越大越模糊,如果沒有設定值,那麼預設為0,只能裝置CSS的長度值,如px
、rem
等,不支援百分比。
filter: blur(5px);
原圖 | css |
---|---|
brightness()
給圖片應用一種線性乘法,使其看起來更亮或更暗。如果值是0%,影象會全黑。值是100%,則影象無變化。其他的值對應線性乘數效果。值超過100%也是可以的,影象會比原來更亮。如果沒有設定值,預設是1。
filter: brightness(0.5)
原圖 | css |
---|---|
contrast()
調整圖片的對比度,0%時影象全黑,100%時影象不變,超過100%時指運用更低的對比,預設為1
filter: contrast(200%)
原圖 | css |
---|---|
drop-shadow()
給影象設定一個陰影效果,和css中的box-shadow
相似,不同的是,drop-shadow()
中不可以指定inset
,其餘均相同。
filter: drop-shadow(16px 16px 10px black)
原圖 | css |
---|---|
grayscale()
設定影象的灰度,100%則為灰度影象,0%則影象無變化,值只能在0%-100%之間,預設為0。
filter: grayscale(100%)
原圖 | css |
---|---|
hue-rotate()
影象色相旋轉,引數為deg
,值在0deg-360deg之間,超過360deg意味著旋轉了一週,並無實際意義。
filter: hue-rotate(90deg)
原圖 | css |
---|---|
invert()
反轉影象,值是轉換的比例,值在0%-100%之間,100%則完全反轉,0%則無變化,可以實現曝光的效果。
filter: invert(100%)
原圖 | css |
---|---|
opacity()
轉化影象的透明程度。值定義轉換的比例。值為0%則是完全透明,值為100%則影象無變化。值在0%和100%之間,則是效果的線性乘子,也相當於影象樣本乘以數量。 若值未設定,值預設是1。該函式與已有的opacity屬性很相似,不同之處在於通過filter,一些瀏覽器為了提升效能會提供硬體加速。
filter: opacity(50%)
saturate()
轉換影象飽和度。值定義轉換的比例。值為0%則是完全不飽和,值為100%則影象無變化。其他值,則是效果的線性乘子。超過100%的值是允許的,則有更高的飽和度。 若值未設定,值預設是1。
filter: saturate(200%)
原圖 | css |
---|---|
sepia()
將影象轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的,值為0%影象無變化。值在0%到100%之間,則是效果的線性乘子。若未設定,值預設是0。
filter: sepia(100%)
原圖 | css |
---|---|
複合使用
filter: <filter-function> [<filter-function>]* | none
你可以組合任意數量的函式來控制渲染,例如:
filter: contrast(175%) brightness(30%);
原圖 | css |
---|---|
filter: drop-shadow(16px 16px 20px red) invert(75%);
原圖 | css |
---|---|
SVG濾鏡
什麼是SVG濾鏡
SVG濾鏡用來增加對SVG圖形的特殊效果,給影象新增svg濾鏡也可以實現影象的各種顯示效果。
如何使用SVG濾鏡
在CSS濾鏡中有一個url()
函式,這個函式接受一個SVG檔案,在此檔案中設定一個SVG濾鏡,在函式中引用,即可實現SVG濾鏡,如:
/*定義一個svg檔案test.svg*/
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="green">
<feColorMatrix type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0 "/>
</filter>
</defs>
</svg>
/*在css中引用這個檔案中的濾鏡效果*/
filter:url("test.svg#green");
可以看出,濾鏡是定義在test.svg
的filter
中,再在css中引用定義的名稱為green
的濾鏡,可以實現圖片變綠的效果。
上述CSS濾鏡中的很多影象效果,都可以使用SVG濾鏡實現,下面介紹幾個。
實現CSS濾鏡效果
blur
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</svg>
brightness
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]"/>
<feFuncG type="linear" slope="[amount]"/>
<feFuncB type="linear" slope="[amount]"/>
</feComponentTransfer>
</filter>
</svg>
contrast
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
</feComponentTransfer>
</filter>
</svg>
drop-shadow
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
<feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
<feFlood flood-color="[color]"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
如何自定義svg濾鏡
自定義SVG濾鏡需要有SVG知識,相關的知識可以自行在網上查詢,筆者這裡介紹一個可以取得濾鏡效果程式碼的工具,可以使用工具匯出的SVG中的濾鏡效果,加入到CSS中實現。
這個工具提供了對影象新增濾鏡的功能,然後將新增的濾鏡以SVG的形式匯出,並用編輯軟體(editplus,sublime text等軟體就OK)開啟,可以取得裡面的濾鏡相關屬性。
使用
-
開啟軟體,將影象拖動到軟體的畫布中
-
選擇合適的濾鏡
-
通過
檔案 - 另存為
匯出SVG -
開啟SVG檔案,找到濾鏡的程式碼,一般在
svg - defs - filter
,將濾鏡程式碼複製到css中即可使用