filter屬性用於設置元素的視覺效果。此屬性主要用於圖像內容。
用法:
filter:none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()| url();
注意：然後，可以將多個過濾器添加到HTML元素。
例：
img {
filter:brightness(20%) blur(20px);
}
本示例將兩個過濾器函數應用於網頁中的圖像元素。
過濾函數：
- 沒有：這是默認值，並且不起作用。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:none; } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- brightness()：它設置元素的亮度。如果亮度為0％，則它是完全黑色的；如果亮度為100％，則它與原始的相同。值大於100％表示元素更亮。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:brightness(10%); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- grayscale()：它將元素顏色轉換為黑色和白色。灰度0％表示原始元素，100％表示完全灰度元素。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:grayscale(70%); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- sepia()：它將圖像轉換為棕褐色圖像，其中0％代表原始圖像，100％代表完全棕褐色。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:sepia(50); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- contrast()它有助於調整元素的對比度。對比度0％表示黑色元素，對比度100％表示原始元素。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:contrast(50); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- saturate()：用於設置元素的飽和度。 0％飽和表示元素完全不飽和，而100％飽和表示原始圖像。大於100％結果的值是super-saturated元素。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:saturate(50); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- blur()：將模糊效果應用於元素。如果未指定模糊值，則它將0作為默認值。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:blur(5px); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- opacity()：它設置圖像的不透明度效果。不透明度0％表示元素是完全透明的，如果不透明度為100％，則表示原始圖像。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:opacity(0.5); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- hue-rotate()：它將色調旋轉應用於圖像。該值定義將調整圖像樣本的色環周圍的度數。默認值為0度，它代表原始圖像。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:hue-rotate(45deg); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- invert()：它反轉元素。默認值為0％，它代表原始圖像。 100％使圖像完全反轉。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:invert(50); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- drop-shadow()：它將陰影效果應用於元素。它接受h-shadow，v-shadow，模糊，散布和顏色作為值。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:drop-shadow(16px 18px 15px rgba(255, 0, 0, 0.5)); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
- 初始：它將filter屬性設置為其默認值。
例：
<!DOCTYPE html> <html> <head> <title>CSS filter property</title> <style> img { filter:initial(); } </style> </head> <body> <div> <img src = "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png" alt="Geeks image" > </div> </body> </html>輸出：
支持的瀏覽器：filter屬性支持的瀏覽器如下：
- Google Chrome 53.0、18.0 -webkit-
- Internet Explorer 13.0
- Firefox 35.0
- Safari 9.1、6.0 -webkit-
- Opera 40.0、15.0 -webkit-
相關用法
- CSS backdrop-filter用法及代碼示例
- HTML Style filter用法及代碼示例
- HTML DOM NodeIterator filter屬性用法及代碼示例
- HTML DOM TreeWalker filter屬性用法及代碼示例
- CSS transition-property用法及代碼示例
- JavaScript Array filter()用法及代碼示例
- PHP Ds\Sequence filter()用法及代碼示例
- PHP Ds\Vector filter()用法及代碼示例
- PHP Ds\Set filter()用法及代碼示例
注：本文由純淨天空篩選整理自shivangsharma15大神的英文原創作品 CSS | filter Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。