樣式 filter 屬性
描述
filter 屬性為影像新增視覺效果（如模糊和飽和度）。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 篩選器 | 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
語法
返回 filter 屬性
object.style.filter
設定 filter 屬性
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
濾鏡函式
注意： 使用百分比值（例如 75%）的濾鏡也接受小數（例如 0.75）形式的值。
| 濾鏡 | 描述 |
|---|---|
| none | 指定無效果 |
| blur(px) | 對影像應用模糊效果。值越大，模糊程度越大。 如果未指定值，則使用 0。 |
| brightness(%) | 調整影像的亮度。 0% 將使影像完全變黑。 100% (1) 是預設值，表示原始影像。 值超過 100% 將提供更亮的影像。 |
| contrast(%) | 調整影像的對比度。 0% 將使影像完全變黑。 100% (1) 是預設值，表示原始影像。 值超過 100% 將提供對比度較低的影像。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 對影像應用陰影效果。 可能的值 h-shadow - 必需。指定水平陰影的畫素值。負值將陰影放置在影像左側。 v-shadow - 必需。指定垂直陰影的畫素值。負值將陰影放置在影像上方。 blur - 可選。這是第三個值，必須以畫素為單位。為陰影新增模糊效果。值越大，模糊程度越大（陰影變得更大更亮）。不允許負值。如果未指定值，則使用 0（陰影邊緣銳利）。 spread - 可選。這是第四個值，必須以畫素為單位。正值將使陰影展開並變大，負值將使陰影縮小。如果未指定，則為 0（陰影將與元素大小相同）。 注意： Chrome、Safari 和 Opera，以及其他瀏覽器，不支援此第 4 個長度；如果新增，將不會渲染。 color: 可選。為陰影新增顏色。如果未指定，顏色取決於瀏覽器（通常是黑色）。 提示： 此濾鏡類似於 box-shadow 屬性。 |
| grayscale(%) | 將影像轉換為灰度。 0% (0) 是預設值，表示原始影像。 100% 將使影像完全灰度（用於黑白影像）。 注意： 不允許負值。 |
| hue-rotate(deg) | 對影像應用色相旋轉。該值定義了影像樣本將在色環上調整的度數。0deg 是預設值，表示原始影像。 注意： 最大值為 360deg。 |
| invert(%) | 反轉影像中的樣本。 0% (0) 是預設值，表示原始影像。 100% 將使影像完全反轉。 注意： 不允許負值。 |
| opacity(%) | 設定影像的不透明度級別。不透明度級別描述了透明度級別，其中 0% 完全透明。 100% (1) 是預設值，表示原始影像（無透明度）。 注意： 不允許負值。 提示： 此濾鏡類似於 opacity 屬性。 |
| saturate(%) | 飽和影像。 0% (0) 將使影像完全不飽和。 100% 是預設值，表示原始影像。 值超過 100% 將提供超飽和的影像。 注意： 不允許負值。 |
| sepia(%) | 將影像轉換為棕褐色。 0% (0) 是預設值，表示原始影像。 100% 將使影像完全棕褐色。 注意： 不允許負值。 |
技術詳情
| CSS 版本 | CSS3 |
|---|
相關頁面
CSS 參考： filter 屬性
