css3 中的filter使用

最新推荐文章于 2022-12-27 15:02:17 发布

辛丙亮

最新推荐文章于 2022-12-27 15:02:17 发布

阅读量429

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： filter css3

本文链接：https://blog.youkuaiyun.com/qq_22533095/article/details/50509970

前端专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS中-webkit-filter属性的各种效果，包括灰度、褐色图像、饱和度调整等，并提供了具体的使用示例和参数说明。

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

filter的作用就是像对图像和视频产生各种各样的效果，这个仅仅只有webkit内核的浏览器支持。

html结构

<span style="font-family:Arial;font-size:14px;">img{
    margin-left: 10px;
}
<body>
    <img src="a.jpg" height="510" width="510">
    <img src="a.jpg" height="510" width="510" class="change">
</body></span>

效果一:grayscale灰度，值的范围0~1

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:grayscale(1);
        }</span>

效果二:sepia褐色图像，值的范围0~1

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:sepia(300);
        }</span>

效果三:saturate饱和度,值的范围0~n

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:saturate(0.1);
        }</span>

感觉还好对吧，下面请接受惊吓。

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:saturate(30);
        }</span>

效果四:hue-rotate,取值范围0~360deg

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:hue-rotate(175deg);
        }</span>

效果五:invert反色，取值范围0~1

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:invert(1);
        }</span>

效果六:opacity透明度,取值范围0~1

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:opacity(.2);
        }</span>

效果七:brightness亮度,0~n

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:brightness(0.5);
        }</span>

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:brightness(5);
        }</span>

效果八:contrast对比度，取值0~n

        .change{
           -webkit-filter:contrast(2);
        }

效果九:blur模糊

        .change{
           -webkit-filter: blur(4px);
        }

效果10:drop-shadow 阴影

        .change{
           -webkit-filter: drop-shadow(5px 5px 5px red);
        }

其实以上的各种效果是可以多个混合使用的。下面做一下总结

grayscale灰度，值的范围0~1

sepia褐色图像，值的范围0~1

saturate饱和度,值的范围0~n

hue-rotate,取值范围0~360deg

invert反色，取值范围0~1

opacity透明度,取值范围0~1

brightness亮度,0~n

contrast对比度，取值0~n

blur模糊，取值npx

drop-shadow 阴影，取值(npx npx npx color)