CSS |过滤器属性

filter 属性用于设置元素的视觉效果。此属性主要用于图像内容。

句法：

filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|
url();

注意：可以向 HTML 元素添加多个过滤器。
例子：

img {
   filter: brightness(20%) blur(20px);
}

此示例将两个过滤器函数应用于网页中的图像元素。

过滤函数：

• none：默认值，不应用任何效果。

  例子：

  输出：
  

• 亮度()：它设置元素的亮度。如果亮度为 0% 则它是全黑的，如果亮度为 100% 则它与原始相同。结果大于 100% 的值是更亮的元素。

  例子：

  输出：
  

• grayscale()：它将元素颜色转换为黑色和白色。灰度0%表示原始元素，100%表示完全灰度元素。

  例子：

  输出：
  

• sepia()：它将图像转换为棕褐色图像，其中 0% 代表原始图像，100% 代表完全棕褐色。

  例子：

  输出：
  

• contrast()有助于调整元素的对比度。 0% 对比度表示完全黑色元素，100% 对比度表示原始元素。

  例子：

  输出：
  

• saturate()：用于设置元素的饱和度。 0% saturate 表示元素完全不饱和，100% saturate 表示原始图像。结果大于 100% 的值是超饱和元素。

  例子：

  输出：
  

• blur()：它对元素应用模糊效果。如果未指定模糊值，则它采用 0 作为默认值。

  例子：

  输出：
  

• opacity()：它设置图像的不透明度效果。 0% 不透明度表示元素完全透明，如果不透明度为 100%，则表示原始图像。

  例子：

  输出：
  

• 色调旋转()：它对图像应用色调旋转。该值定义将调整图像样本的色环周围的度数。默认值为 0 度，表示原始图像。

  例子：

  输出：
  

• invert()：反转元素。默认值为 0%，代表原始图像。 100% 使图像完全倒置。

  例子：

  输出：
  

• drop-shadow()：它对元素应用投影效果。它接受 h-shadow、v-shadow、blur、spread 和 color 作为值。

  例子：

  输出：
  

• 初始：它将过滤器属性设置为其默认值。

  例子：

  输出：
  

支持的浏览器：过滤器属性支持的浏览器如下：

• 谷歌浏览器 53.0, 18.0 -webkit-
• 浏览器 13.0
• 火狐 35.0
• Safari 9.1, 6.0 -webkit-
• Opera 40.0, 15.0 -webkit-