CSS filter属性详解

css 专栏收录该内容
2 篇文章 0 订阅

MDN filter介绍

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter element)。filter定义的10种效果分别是:blur、opacity、grayscale、sepia、saturate、hue-rotate、invert、brightness、contrast、drop-shadow。

1、blur

blur 即模糊效果,例如网易云网页播放页面。单位是px,效果可以打开f12编辑添加css属性filter: blur(10px);
左边是加了10px的模糊图,右边是原图。
在这里插入图片描述
注意:blur里的值必须为正值,设置为负数是没效果的!

2、opacity
透明度,跟css opacity效果类似 设置元素的透明度 值在0~1之前,0为完全透明, 1为无效果,这里我们设置属性 filter: opacity(0.5)
左边是设置透明度的图片,右边是原图。
在这里插入图片描述
3、grayscale
使图片变灰的效果,值在0~1之间,1为完全变灰,0表示无效果。这里我们设置属性filter: grayscale(1)
在这里插入图片描述

4、sepia
褐色效果,值也在0~1之间, 0无效果,1完全变褐。效果如图 这里我设置的是1
在这里插入图片描述
5、saturate
饱和度属性,取值大于等于0,当取值为0时 效果和grayscale(1)类似。效果如图 我设置饱和度为0
在这里插入图片描述
6、invert
颜色反转属性,值在0 ~ 1或者0 ~ 100%之间,当为1或100%时为完全反转。
在这里插入图片描述
7、brightness
亮度,取值为数字或百分数,当取值为1时,与原图一致,当取值为0或者负数是为全黑,当取值为0-1时,亮度降低,当取值大于1时,亮度增大。
在这里插入图片描述
8、contrast
对比度,取值为大于或等于0的数字或百分数,当取值为1时,与原图一致,当取值为0-1时,对比度降低,当取值大于1时,对比度增大。
在这里插入图片描述
9、drop-shadow
阴影效果,类似box-shadow,这里我们设置属性值为 drop-shadow(10px, 10px, grey)
在这里插入图片描述
10、hue-rotate
色彩旋转,取值是角度,单位是deg,这里我们设置属性值为hue-rotate(45deg)
在这里插入图片描述
over…散会

  • 9
    点赞
  • 5
    评论
  • 27
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值