CSS3滤镜属性详解

亮度

属性名称:

filter:brightness(倍数);当倍数值大于1的时候元素会变亮,小于1的时候元素会变暗 该属性的作用为调整元素当前的亮度,一般来说可以适用于鼠标悬浮到某元素时的提醒作用

.brightness{
       width:100px;
       height:100px;
       background-color:orange;
       transition: 0.5s;
   }
.brightness:hover{
       filter: brightness(2.1);
 }
 <div class="brightness"></div>

对比度

属性名称

filter:contrast(百分比);所谓对比度,简单理解的话就是一个区域里面每个颜色都会变得格外显眼,黑的更黑,白的更白

.contrast{
    width:100px;
    height:100px;
    background-color:orange;
    transition: 0.5s;
}
.contrast:hover{
     filter: contrast(110%);
}
<div class="contrast"></div>

当元素只有一种颜色时,该属性看效果和变亮看上去差不多,如果我们给该元素设置一个背景图片的话,那就是另一回事了

 

.contrast{
       width:100px;
       height:100px;
       background-image:url("https://www.baidu.com/link?url=tfnTZJcu0Gb4qd7Y5Ei3PzBRCzpxrSqWeZbN0jXP1mqbuhEy7_WlB95ezXu-2jCLDyxeBGW3J-J1sLKRErE7lzLJ21zIrm4FN5YdFC5hbGEPKycVvLHLN8LsaR5LU9DoPiHF9t7ZrJeKBYX6Tl6y8Sfv7xEuPjpd746cckJKO8yE2A6FQn3jwpY8phNQiAwfEeG1w_N65fcg1arcuG913askTKxZytawIReuNzTUaIvVt9-JC1EJpfn-uWkDgsrsmwfwI_154dUk6efO7LAO08Mrka6KlCu5Ys9x1KwIzVnjkcZ25KBXeNOarjSS8z95vi9hB0nvx0CEipyRRVm2tJR9RYW5Wr5cRkdqaVFz5LULTjKrvPOatlKqDS0XGh4GAxitk50zSKTK5izWRtoY246kfBs0mvwy2sqL2ln91fo6WSpHrYGsa9R6RJrHWLkeXUaTgcNh7LMR_vMTy4Dntf1m2rRhF9MklTBHUHDuxjw2SfVnhNFPSx5-q6fRXhclfVOZ2UqWruueUH4kW-xQWhewDxyvyGyavCc6Ungs_w2BQFlY2cxNNrfaiDKCNl302tx-O_dw5uMCEWuLWXgB5UC23RWlEP5Ry0F2zHV61A8F6TZ_2eFwuPkj7fo4owWL&timg=&click_t=1536053853943&s_info=1903_987&wd=&eqid=e7fc49f90001c149000000055b8e5288");
       transition: 0.5s;
   }
   .contrast:hover{
       filter: contrast(200%);
    }
   <div class="contrast"></div>

模糊

属性名称

filter:blur(模糊半径);给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

.blur{
       width:100px;
       height:100px;
       background-image:url("xxxx.png");
       transition: 0.5s;
   }
   .blur:hover{
       filter: blur(10px);

    }
   <div class="blur"></div>

色调

属性名称:灰色色阶

filter:grayscale();该属性的作用较为简单,就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

属性名称:褐色色阶

filter:sepia();该属性的作用同上,都是将某个区域的颜色进行简化,该属性会将一个颜色丰富的区域变成一种老黑白照片效果,让图片有一种轻微泛黄的样子

.sepia{
       width:100px;
       height:100px;
       background-image:url("xxxx.png");
       transition: 0.5s;
   }
   .sepia:hover{
        filter: sepia(1);
    }
   <div class="sepia"></div>

饱和度

属性名称

filter:saturate(%);转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。随着饱和度的增加,颜色就会更“清楚”。饱和度越小,颜色就会越“淡”;

.saturate{
       width:100px;
       height:100px;
       background-image:url("3.png");
       transition: 0.5s;
   }
   .saturate:hover{
       filter: saturate(100%);

    }
   <div class="saturate"></div>

该图片随着饱和度的增加,颜色变得越来越鲜艳

以上为滤镜属性中使用较多的属性值,此外还有一些使用较少的属性值,比如:drop-shadow、hue-rotate、invert等,如果各位小伙伴有兴趣的话,可以对这些属性深入的研究一下.

 

 

参考链接:https://mp.weixin.qq.com/s/XMnjo483inWYiGVFJ8Zk3A

发布了70 篇原创文章 · 获赞 44 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览