CSS3的滤镜

最新推荐文章于 2024-04-15 15:31:49 发布

檬是柠檬的檬826

最新推荐文章于 2024-04-15 15:31:49 发布

阅读量637

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/121118511

版权

本文介绍了CSS3的滤镜功能，包括模糊、亮度、对比度、阴影、灰度、反转、透明度、棕褐色和饱和度等效果，并详细解析了各滤镜函数的用法和参数含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3的滤镜

CSS3的滤镜

CSS3的滤镜

1.什么是滤镜

CSS3滤镜是对图像等图形元素执行视觉效果的操作，如模糊，平衡对比度或亮度，色彩饱和度等。

2.滤镜的实现

使用CSS3filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜效果。

3.常用的滤镜函数

（1）模糊效果（blur（））

此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则默认值为0。
模糊效果：blur(number),number越大图像越模糊
在这里插入图片描述

（2）图像亮度（brightness（））

设置图像的亮度：brightness(number)，number越大图像越亮,number不能取负值。可以是整数也可以是百分比。

在这里插入图片描述

（3）图像的对比度（contrast（））

contrast（）功能用于调整图像的对比度。值0%将创建全黑的图像。而值100%或1保持图像不变。还允许超过100%的值，从而提供对比度较低的结果。如果未提供参数，则默认值为1。
在这里插入图片描述

（4）阴影效果（drop-shadow（））

阴影效果：drop-shadow(args1 args2 args3 args4)，作用类似CSS中的box-shadow属性

属性住	含义
arg1	阴影水平偏移量
arg2	阴影的垂直偏移量
arg3	阴影的模糊半径
arg4	阴影的颜色

在这里插入图片描述

（5）将图像转化为灰度（grayscale（））

grayscale（）功能可以将图像转换为灰度。值100%表示完全是灰度，值0%保留图像不变。如果未提供参数，则默认值为0。

在这里插入图片描述

<style>
    img{
        height: 260px;
        width: 300px;
    }
    #img1{
        
        /* -webkit-filter: blur(2px); */
        filter: blur(5px); /*模糊半径为5px*/
        border-radius: 50%;
    }
    #img2{
       
        filter: brightness(0.5); /*图像的亮度：取值可以是非负的整数或小数，也可以是百分比*/
    }
    #img3{
        filter: contrast(50%); /*图像的对边度：取值可以是非负的整数或小数，也可以是百分比*/
    }
    #img4{
        filter: drop-shadow(4px 4px 30px orange);
    }
    #img5{
        filter: grayscale(100%);
    }
</style>
<body>
    <img id="img1" src="../images/2.png" alt="">
    <br><br>
    <img id="img2" src="../images/2.png" alt="">
    <br><br>
    <img id="img3" src="../images/2.png" alt="">
    <br><br>
    <img id="img4" src="../images/2.png" alt="">
    <br><br>
    <img id="img5" src="../images/2.png" alt="">
</body>

（6）图像的反转（invert（））

invert（）函数将像Photoshop这样的反转效果应用于图像。100%或1表示被完全反转。0%表示不反转。0%到100%之间的值是效果的线性函数。如果未提供参数，则默认值为0。不允许使用负值。

在这里插入图片描述

（7）透明度（opacity（））

opacity（）功能可用于为图像添加透明度。0%为完全透明。100%或1保持图像不变。如果未提供参数，则默认值为1。

在这里插入图片描述

（8）棕褐色效果（sepia（））

sepia（）功能将图像转换为棕褐色。100%或1是完全棕褐色。0%保留图像不变。如果未提供参数，则默认值为0。

在这里插入图片描述
提示：在摄影方面，综合色调是一种特殊的处理方法，可以使黑白照片具有较暖的色调（红棕色），以增强其存档质量。

（9）图像的饱和度（saturate（））

saturate（）功能可用于调整图像的饱和度。0%表示完全不饱和。100%保留图像不变。还允许值超过100%，从而提供超饱和效果。如果未提供参数，则默认值为1。

在这里插入图片描述

<style>
    img{
        width: 300px;
        height: 260px;
    }
    #img6{
        filter: invert(100%);
    }

    #img7{
        filter: opacity(80%);
    }
    #img8{
        filter: sepia(100%);
    }
    #img9{
        filter: saturate(200%);
    }
</style>
<body>
    <img id="img6" src="../images/2.png" alt="">
    <br><br>
    <img id="img7" src="../images/2.png" alt="">
    <br><br>
    <img id="img8" src="../images/2.png" alt="">
    <br><br>
    <img id="img9" src="../images/2.png" alt="">
</body>