css filter 属性介绍

CSS的filter属性提供了对元素<img><video><canvas>等的可视化效果，如模糊、亮度、对比度、饱和度等。它接受一系列不同的函数值，这些函数值可以组合起来创建复杂的视觉效果。

以下是filter属性中常用的一些函数：

// grayscale()：将图像转换为灰度图像。它接受一个介于 0（无变化）和 1（完全灰度）之间的值。

img {  
  filter: grayscale(1);  
}

// sepia()：将图像转换为棕褐色调。它接受一个介于 0（无变化）和 1（完全棕褐色）之间的值。
img {  
  filter: sepia(1);  
}

//saturate()：调整图像的饱和度。值为 100% 则图像无变化，值超过 100% 则增加饱和度，值小于 100% 则减少饱和度。

img {  
  filter: saturate(50%);  
}

// hue-rotate()：给图像应用色相旋转。值表示色相旋转的角度（单位是度）。

img {  
  filter: hue-rotate(90deg);  
}

// invert()：反转图像的颜色。值为 100% 则完全反转，值为 0% 则无变化。
img {  
  filter: invert(100%);  
}

// brightness()：调整图像的亮度。值为 100% 则图像无变化，值超过 100% 则增加亮度，值小于 100% 则减少亮度。

img {  
  filter: brightness(50%);  
}

// contrast()：调整图像的对比度。值为 100% 则图像无变化，值超过 100% 则增加对比度，值小于 100% 则减少对比度。

img {  
  filter: contrast(200%);  
}

// blur()：对图像应用模糊效果。值越大，模糊效果越明显。

img {  
  filter: blur(5px);  
}

// opacity()：调整图像的透明度。这与 CSS 的 opacity 属性类似，但 filter 属性的 opacity() 函数不会影响子元素的透明度。

img {  
  filter: opacity(50%);  
}

// 这些函数可以组合使用，以创建更复杂的视觉效果。例如：
img {  
  filter: grayscale(1) contrast(200%);  
}

请注意， filter 属性可能不会在所有浏览器中都被完全支持，特别是旧版本的浏览器。因此，在使用之前，请确保检查目标浏览器的兼容性。