Latest web development tutorials

Style filter 屬性

Style 對象參考手冊 Style對象

實例

修改圖片顏色為黑白(100% 灰度):

// Chrome, Safari和Opera瀏覽器
document.getElementById( "myImg" ).style.WebkitFilter = "grayscale(100%)" ;

//標準語法(其他主流瀏覽器不支持)
document.getElementById( "myImg" ).style.filter = "grayscale(100%)" ;

嘗試一下»

定義和用法

filter 用於定於元素(通常是<img>)的可視效果。

注意：如果元素不是靈活的項目，則flexGrow屬性不起作用。

瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。

屬性
filter 18.0 Webkit 不支持 不支持 6.0 Webkit 15.0 Webkit

注意: Chrome, Safari和Opera使用WebkitFilter屬性代替。

語法

返回filter 屬性： 

object.style.filter

設置filter 屬性： 

object.style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter 函數

注意:濾鏡通常使用百分比(如：75%),當然也可以使用小數來表示(如：0.75)。

Filter 描述
none 默認值，沒有效果。
blur( px ) 給圖像設置高斯模糊。 "radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。
brightness( % ) 給圖片應用一種線性乘法，使其看起來更亮或更暗。 如果值是0%，圖像會全黑。 值是100%，則圖像無變化。 其他的值對應線性乘數效果。 值超過100%也是可以的，圖像會比原來更亮。 如果沒有設定值，默認是1。
contrast( % ) 調整圖像的對比度。 值是0%的話，圖像會全黑。 值是100%，圖像不變。 值可以超過100%，意味著會運用更低的對比。 若沒有設置值，默認是1。
drop-shadow( h-shadow v-shadow blur spread color )

給圖像設置一個陰影效果。 陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。 該函數與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。 <shadow>参数如下：

<offset-x> <offset-y> (必須)
這是設置陰影偏移量的兩個<length>值. <offset-x>設定水平方向距離.負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。 查看<length>可能的單位.
如果兩個值都是 0 ,則陰影出現在元素正後面(如果設置了   <blur-radius> and/or <spread-radius>， 会有模糊效果 ).
<blur-radius> (可選)
這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值若未設定，默認是0 (則陰影的邊界很銳利).
<spread-radius> (可選)
這是第四個<length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，默認是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器不支持第四個長度，如果加了也不會渲染。
<color> (可選)
查看<color>該值可能的關鍵字和標記。 若未設定，顏色值基於瀏覽器。 在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，會應用color color屬性的值。 另外, 如果顏色值省略，WebKit中陰影是透明的。
grayscale( % )

將圖像轉換為灰度圖像。 值定義轉換的比例。 值為100%則完全轉為灰度圖像，值為0%圖像無變化。 值在0%到100%之間，則是效果的線性乘子。 若未設置，值默認是0；

hue-rotate( deg )

給圖像應用色相旋轉。 "angle"一值設定圖像會被調整的色環角度值。 值為0deg，則圖像無變化。 若值未設置，默認值是0deg。 該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

invert( % )

反轉輸入圖像。 值定義轉換的比例。 100%的價值是完全反轉。 值為0%則圖像無變化。 值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。

opacity( % )

轉化圖像的透明程度。 值定義轉換的比例。 值為0%則是完全透明，值為100%則圖像無變化。 值在0%和100%之間，則是效果的線性乘子，也相當於圖像樣本乘以數量。 若值未設置，值默認是1。 該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。

saturate( % )

轉換圖像飽和度。 值定義轉換的比例。 值為0%則是完全不飽和，值為100%則圖像無變化。 其他值，則是效果的線性乘子。 超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。

sepia( % )

將圖像轉換為深褐色。 值定義轉換的比例。 值為100%則完全是深褐色的，值為0%圖像無變化。 值在0%到100%之間，則是效果的線性乘子。 若未設置，值默認是0；

url()

URL函數接受一個XML文件，該文件設置了一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。

例如： 

filter: url(svg-url#element-id)
initial

設置屬性為默認值，可參閱： CSS initial關鍵字

inherit 從父元素繼承該屬性，可參閱： CSS inherit關鍵字

技術細節

CSS 版本 CSS3

相關文章

CSS參考手冊: filter屬性

Style 對象參考手冊 Style對象