常州布谷鸟网络上海小程序开发公司,上海APP开发,上海小程序分销商城,上海小程序商城,上海网站定制,上海网络公司,上海网站建设,上海微信公众号维护
CSS3 filter滤镜详解
日期:2021-12-23 11:21:33  阅读:

CSS3 filter滤镜详解

1、filter:blur(px) 高斯模糊

2、filter:brightness(%) 亮度调节

3、filter:contrast(%) 对比度调节

4、 filter:drop-shadow(offset-x offset-y blur spread color) 阴影设置

5、filter:grayscale(%) 灰度

6、filter:hue-rotate(deg) 应用色旋转

7、filter:invert(%) 反转图像输入

8、filter:opacity(%) 透明度

9、filter:saturate(%) 饱和度

10、filter:sepia(%) 褐色转化


因为filter是css3新属性,所以我们在介绍它之前先简单看一下它的兼容性(图片来源于菜鸟教程):


那么我们开始介绍一下filter的几个属性:

1、filter:blur(px) 高斯模糊

这个属性很简单是给图像设置高斯模糊,括号中数值越大那么图像越模糊。

写个例子:


这是一张图片

p标签


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18


就如效果图上所显示的,这个属性会影响到这个标签下面所有的子代元素。


2、filter:brightness(%) 亮度调节

说简单点这个属性用于调节图像亮度,值位于0和1之间,默认是1(正常亮度),数值越小亮度越低,到达0时为黑色。

例:


div{

color: red;

filter: brightness(50%);

}

1

2

3

4

效果图如下:


html和上面相同,这里不做复制,看效果图就很容易理解,图像很明显变暗,字体颜色设置的红色,这里变成黑红,说明对子代同样有效。


3、filter:contrast(%) 对比度调节

这个属性调节的是图像当中的对比度,取值同brightness,为了我们看的更清晰,我换了一张图片,请看案例:


原图

contrast(50%)

brightness(50%)

这是一张图片

p标签


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

效果图如下:



4、 filter:drop-shadow(offset-x offset-y blur spread color) 阴影设置

这个属性可设置图像阴影,类似于box-shadow,所以她的五个参数分别是,x偏移量、y偏移量、模糊程度(值越小图像越清晰)、阴影大小、颜色。注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。

注意如果加上了这个属性值,那么drop-shadow不能够使用

例:


div{

color: red;

filter: drop-shadow(10px 10px 5px red);

}

1

2

3

4

效果图:


通过filter滤镜,一些浏览器为了更好的性能会提供硬件加速。


5、filter:grayscale(%) 灰度

使图像变成灰度样式,值同样是0-1;

例:


div{

color: red;

filter: grayscale(80%);

}

1

2

3

4

效果图:



6、filter:hue-rotate(deg) 应用色旋转

这个属性需要大家去做一下案例才比较好理解,给图像应用色相旋转,相当于是一些应用色来相互转换。默认值为0deg。

例:


div{

color: red;

filter: hue-rotate(180deg);

}

1

2

3

4

效果图:


可比较上面的原图。


7、filter:invert(%) 反转图像输入

反转输入图像.数值为超过50%之前,慢慢递增图像逐渐变得模糊,超过50%以后,数值满满递增,图像开始反向清晰。

例:


div{

color: red;

filter: invert(100%);

}

1

2

3

4

效果图:



8、filter:opacity(%) 透明度

这个属性大家很熟悉是关于透明度的,和直接使用opacity(%)不同的是,使用filter后 一些浏览器为了提升性能会提供硬件加速。

例:


div{

color: red;

filter: opacity(50%)

}

1

2

3

4

效果图:



9、filter:saturate(%) 饱和度

转化图像的饱和度,数值为0-100%,由于本人对这些东西不是特别敏感,所以大家自行理解。(原图为饱和度100%,饱和度逐渐降低,图像变得越来越不清晰)

例:


原图

saturate(50%)

这是一张图片

p标签


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

效果图:



10、filter:sepia(%) 褐色转化

将图像转换为深褐色。其实类似于灰度,只是转变的颜色不同而已,默认值为0.

例:


div{

color: red;

filter: sepia(50%);

}

1

2

3

4

效果图:


————————————————

版权声明:本文为CSDN博主「无脑的猿人」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/pycharm_k/article/details/105583337





作者:无脑的猿人 (来源:CSDN

[声明] 本文系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网邮箱 7016867@qq.com 联系,我们将在第一时间删除内容!
Design By 布谷鸟网络 Since 2004 | 上海网络公司 | 上海网站设计 | 上海网页设计 | 上海小程序开发公司 | 上海微信商城设计 | 上海微信公众号商城 | 上海小程序商城 | 网站地图 |
本站由 为布谷鸟网络(www.cncuckoo.com)提供云计算与安全服务 苏ICP备12074670号-1 上海百度优化