CSS过滤器效果：CSS中的模糊，灰度，亮度等！

> CSS过滤器：图像操作的综合指南

CSS滤波器效果的

>> 最初是SVG规范的一部分，

> CSS过滤器提供了一种强大且用户友好的方法来操纵图像渲染。 这些现在已集成到CSS中的过滤器可以使模糊，亮度，饱和调整等等。 它们可以单独或组合使用，从而提供多功能的视觉效果。 基本语法很简单：

>让我们探索关键过滤器：

filter: <filter-function> [<filter-function>]* | none;

密钥概念：

> css滤波器在显示前修改元素渲染

，提供有效的图像操作。 它们拥有广泛的浏览器支持并促进各种效果（模糊，亮度，对比度，落下，灰度，灰度，色调，旋转，反转，不透明度，饱和，棕褐色）。

>
• 过滤器可以组合和动画，以进行动态视觉效果。 申请顺序会影响最终结果，有些过滤器可能会覆盖其他滤镜。 它们适用于各种元素，包括图像，视频和iframe。> 虽然通常性能，但如果没有硬件加速度，过滤器可能会较慢。
滤波器性能取决于应用的SVG滤波器。 主要的浏览器支持
• 属性，但是Internet Explorer是一个例外。
• blur单个滤波器功能： url() filter

亮度：控制图像亮度。 接受值≥0; 0％是黑色，100％是原始的，值＆gt; 100％增加亮度。

• 对比度：调整图像对比度。 值≥0; 0％导致灰度图像，100％是原始图像，较高的值增加对比度。 filter: brightness(300%);

• >灰度：将图像转换为灰度。 值范围从0％（无效）到100％（完全灰度）。 filter: contrast(0%);

• 饱和：控制颜色饱和。 0％去除所有颜色，100％是原始颜色，并且值＆gt; 100％过饱和。 filter: grayscale(100%);

• 棕褐色：应用棕褐色音。 0％是原始的，100％是完全棕褐色。 filter: saturate(0%);

• 色调rotate：旋转图像色调。 0deg没有改变；值＆gt; 360DEG环绕。 filter: sepia(100%);

• 倒置：反转图像颜色。 0％没有效果，100％完全反转。 filter: hue-rotate(90deg);

• 模糊：应用高斯模糊。 半径（以像素为单位）决定了模糊强度。 filter: invert(100%);

• 不透明度：控制透明度。 0％是完全透明的，100％不透明。 filter: opacity(75%);

• >滴阴影：添加了一个落下阴影。 需要X和Y偏移，颜色和可选的半径模糊。 filter: drop-shadow(5px 5px 10px #666);

• url（）：允许使用自定义SVG过滤器。 引用SVG过滤器的ID。 性能根据SVG滤波器而变化。>

组合和动画过滤器

：>

可以组合多个过滤器；订单很重要，因为某些过滤器覆盖了其他过滤。 动画使用CSS过渡或动画创建动态效果。

附加说明：>

过滤器会影响元素的所有部分（背景，边界，文本）。 它们可以应用于视频和iFrame。 性能通常很好，除了

（无硬件加速度）和blur（取决于SVG滤波器）。 浏览器支持非常出色，不包括Internet Explorer。url()

>常见问题：

本节将包括对原始文本中提供的常见问题解答的答案，以清晰和简洁。 由于太空的限制，我将在这里省略它们，但它们将是最终精打细算的文章的宝贵补充。

以上是CSS过滤器效果：CSS中的模糊，灰度，亮度等！的详细内容。更多信息请关注PHP中文网其他相关文章！