属性filter"/>
非常好玩又实用的css属性filter
你还在为图片实现模糊效果、黑白效果、透明效果、亮度效果、对比效果、饱和度效果、反转效果等问题发愁吗?一个css属性教你解决!
原图:
1、blur (模糊效果),值为px,值越大越模糊
img {filter: blur(2px);
}
2、opacity(透明效果),值在0-1之间,0为完全透明,1为原图
img {filter: opacity(0.5);
}
3、grayscale(黑白效果),值在0-1之间,0为原图,1为完全变灰(0%-100%)
img {filter: grayscale(1);
}
4、sepia(褐色效果),值在0-1之间,0为原图,1为完全变褐(0%-100%)
img {filter: sepia(1);
}
5、saturate(饱和度效果),值不为负数,1为原图(百分比也可以,1=100%)
取值为 0(0%) 时,图片是完全变灰与 filter: grayscale(1) 一致;
当值大于 1(100%)时:
img {filter: saturate(3);
}
6、invert(反转效果),值在0-1之间,0为原图,1为完全反转(0%-100%)
img {filter: invert(100%);
}
7、brightness(亮度效果),值不为负数,1为原图(百分比也可以,1=100%)
超过1,图会更明亮,0-1相当于遮罩效果
使用 filter: brightness(0.5); 就无须额外制作遮罩
img {filter: brightness(0.5);
}
img {filter: brightness(2);
}
8、contrast(对比效果),值不为负数,1为原图(百分比也可以,1=100%)
超过1时,对比度增大,取值0-1时,对比度降低
img {filter: contrast(0.2);
}
img {filter: contrast(1.8);
}
9、drop-shadow(h-shadow v-shadow blur spread color)(阴影效果)
这个滤镜类似 box-shadow 属性。
-
h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。
-
v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。
blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。
spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。
注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。
color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。
img {filter: drop-shadow(8px 8px 10px gray);
}
10、hue-rotate(色彩反转),值为 0deg-360deg,0deg和360deg为原图
img {filter: hue-rotate(180deg);
}
11、多个滤镜
要使用多个滤镜,请用空格分隔每个滤镜。请注意,顺序很重要(例如在 sepia() 之后使用 grayscale() 将产生完全灰色的图像):
img {filter: contrast(200%) brightness(150%);
}
看了这些效果,想不想动手试一下?马上动起来吧,满足自己好奇心!
更多推荐
非常好玩又实用的css属性filter
发布评论