css3 中的filter使用

本文详细介绍了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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值