关注互联网应用及运维技术的个人博客

css和filter滤镜的使用技巧

用于调整图像、背景和边框的渲染

filter:url();接收一个XML文件,设置一个SVG滤镜,指定一个具体的滤镜元素

filter: blur(5px);

filter: brightness(0.4);给图像设置一个线性乘法,让图像更亮或者更暗。默认是100%或者1,值大于100%,图像会更亮,反之图像更黑【暗】;

filter: contrast(200%);调整图像的对比度,

filter: drop-shadow(16px 16px 20px blue);给图像设置阴影,阴影合成在图像的下面,和shadow类似;

filter: grayscale(50%);图像转变灰度图像;

filter: hue-rotate(90deg);图像的色相旋转;

filter: invert(75%);图像反转,默认是0,不反转;

filter: opacity(25%);图像的透明度;

filter: saturate(30%);设置图像的饱和度;

filter: sepia(60%);设置图像的深褐色

/* 多个属性值 */
filter: contrast(175%) brightness(3%);

赞(1)
未经允许不得转载:飞天狒狒 » css和filter滤镜的使用技巧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址