首页 前端知识 css的filter全属性图文介绍

css的filter全属性图文介绍

2024-04-08 11:04:17 前端知识 前端哥 388 392 我要收藏

原图:

  1. 模糊(blur)

单位可为px或rem,值越大,越模糊

filter:blur(3px)
filter:blur(0.3rem)
  1. 亮度(brightness)

值可为数字或百分数,小于1时,亮度更暗;等于1时,无变化;大于1时,亮度更亮

filter:brightness(1.5)
filter:brightness(150%)
  1. 对比度(contrast)

值可为数字或百分数,小于1时,对比度更低;等于1时,无变化;大于1时,对比度更高

filter:contrast(0.7)
filter:contrast(70%)
  1. 阴影(drop-shadow)

四个属性分别为:offset-x(阴影左右偏移的位置) offset-y(阴影上下偏移的位置) blur-radius(阴影模糊范围) color(阴影颜色)

filter:drop-shadow(-20px 10px 14px #c112d1)
  1. 灰度(grayscale)

值可为数字或百分数,等于0时,无变化;等于1时,为全灰;小于0大于1时,灰度为中间值

filter:grayscale(0.8)
filter:grayscale(80%)
  1. 色调旋转(hue-rotate)

单位为deg,值为0deg时,无变化,90deg=0.25turn,-90deg=270deg

filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)
  1. 反色(invert)

值可为数字或百分数,等于0时,无变化;等于1时,完全反色

filter:invert(0.6)
filter:invert(60%)
  1. 透明度(opacity)

值可为数字或百分数,等于0时,为透明;等于0.5时,半透明;等于1时,无变化

filter:opacity(0.3)
filter:opacity(30%)
  1. 饱和度(saturate)

值可为数字或百分数,等于0时,无饱和度;等于0.5时,半饱和度;等于1时,无变化;大于1时,为更大饱和度

filter:saturate(3)
filter:saturate(300%)
  1. 褐度(sepia)

值可为数字或百分数,等于0时,无变化;等于1时,为全褐;小于0大于1时,褐度为中间值

filter:sepia(0.65)
filter:sepia(65%)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4580.html
标签
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!