css，filter详解

CSS Filter是一种可以对元素进行图形和颜色处理的技术。使用CSS Filter可以用CSS添加效果，比如模糊、照片明亮度、饱和度、对比度、色调等等。

CSS Filter属性

CSS Filter属性用于定义图形效果。

语法：

filter: none|matrix|matrix3d|perspective|translate|translateX|translateY|scale|scaleX|scaleY|scaleZ|rotate|rotateX|rotateY|rotateZ|skew|skewX|skewY|blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia|url

属性值说明：

- blur: 定义元素的模糊效果。值为 0 时无效果，值越大元素图片越模糊。

- brightness: 定义元素的亮度。可以为百分数，因此值在 0% 到 100% 之间。

- contrast: 定义元素的对比度。可以为百分数，因此值在 0% 到 100% 之间。

- grayscale: 定义元素的灰度程度。可以为百分数，因此值在 0% 到 100% 之间。

- hue-rotate: 定义元素的色调旋转角度。值为 0deg 时无效果，值越大，角度越大，颜色越饱和。

- invert: 定义元素的反色程度。可以为百分数，因此值在 0% 到 100% 之间。

- opacity: 定义元素的透明度。可以为百分数，因此值在 0% 到 100% 之间。

- saturate: 定义元素的饱和度。可以为百分数，因此值在 0% 到 100% 之间。

- sepia: 定义元素的棕褐色程度。可以为百分数，因此值在 0% 到 100% 之间。

- url: 定义一个指向 SVG、PNG、JPEG、GIF 图像或CSS自定义滤镜的URL。

CSS Filter的浏览器兼容性

CSS Filter是一个比较新的技术，不是所有的浏览器都支持。以下是CSS Filter的浏览器支持列表：

- Chrome / Edge（早期版） / Firefox / Safari 5.1 / Opera：支持所有的CSS Filter

- Internet Explorer：不支持CSS Filter

- Safari 6.0以下不支持CSS Filter

CSS Filter使用示例

以下是一些常见的CSS Filter的用法。

1. Blur 模糊效果

```

img {

filter: blur(5px);

}

```

效果如下：


2. Grayscale 灰度效果

```

img {

filter: grayscale(100%);

}

```

效果如下：


3. Sepia 棕褐色效果

```

img {

filter: sepia(100%);

}

```

效果如下：


4. Hue-rotate 色调旋转效果

```

img {

filter: hue-rotate(180deg);

}

```

效果如下：


5. Invert 反色效果

```

img {

filter: invert(100%);

}

```

效果如下：


6. Brightness/Contrast 亮度/对比度效果

```

img {

filter: brightness(150%) contrast(200%);

}

```

效果如下：


7. Saturate 饱和度效果

```

img {

filter: saturate(200%);

}

```

效果如下：


总结

CSS Filter提供了将图形和颜色上的处理效果添加到元素中的方法。通过实现这些效果，可以改变元素的外观和视觉样式，从而为Web应用程序提供更好的视觉效果。然而，由于不是所有的浏览器都支持CSS Filter，因此必须小心使用以确保兼容性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/