-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
例如:
CSS滤镜 filter
- blur(px):作用是调整元素的模糊度
默认值为 0,单位为像素,值较大越模糊
- brightness(number):指的是图片的亮度 (默认为1)如果给0则是全黑
number越大图像越亮,number不能取负值,可以是整数也可以是百分比
- contrast(%):指的是图片的对比度 (默认为1) 可以设置为百分比
默认值为 100%,代表原始图像;0% 将使图像完全变黑;当值超过 100% 时图像将获得更高的对比度
- grayscale(%): 指的是改变图片的灰度 (默认是0) 可以设置百分比
默认值为 0%,表示原始图像;100% 表示将图像完全变成灰度图像(即黑白图像),不允许为负值
- drop-shadow(h-shadow v-shadow blur spread color) :指的是为图片添加阴影效果
为图像添加阴影效果,参数说明如下:
drop-shadow(h-shadow v-shadow blur spread color)
h-shadow:必填值,指定水平方向阴影的像素值,若值为负,则阴影会出现在图像的左侧;
v-shadow:必填值,指定垂直方向阴影的像素值,若值为负,则阴影会出现在图像的上方;
blur:可选值,为阴影添加模糊效果,默认值为 0,单位为像素,值越大创建的模糊就越多(阴影会变得更大更亮),不允许使用负值;
spread:可选值,默认值为 0,单位为像素。若值为正,则阴影将会扩展并增大;若值为负,则阴影会缩小;
color:可选值,为阴影添加颜色,如未指定,则由浏览器来绝对,通常为黑色。
注:Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数,如果添加,则不会有任何效果
- hue-rotate(deg) :指的是图片色相旋转
该值用来定义色环的度数,默认值为 0deg,代表原始图像,最大值为 360deg
- invert(%):指的是反转输入的图片颜色
默认值为 0%,表示原始图像;100% 则表示完全反转,不允许使用负值
- opacity(%):指的是图片的透明度
默认值为 100%,表示原始图像;0% 表示完全透明,不允许使用负值
- saturate(%):指的是图像饱和度 0是灰色的 100%是完整的填充 超过100% 饱和度更高
默认值为 100%,表示原始图像;0% 表示图像完全不饱和,不允许使用负值
- sepia(%):图像转换为深褐色
默认值为 0%,表示原始图像;100% 表示图像完全变成棕褐色,不允许使用负值