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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。