css3提供了fiter属性,可以对图片做特效处理,如模糊,亮度,对比度等
常用写法:
-webkit-filter:blur(1px) /*兼容Chrome, Safari, Opera */
filter:blur(1px)
常用的效果有:
- blur(px) 高斯模糊
- brightness(%) 亮度(0-100%)
- contrast(%) 对比度
- drop-shadow(水平方向偏移 垂直方向偏移 模糊度 阴影大小(正值会使阴影扩张和变大,负值会是阴影缩小) 阴影颜色),设置图片阴影,前两个参数必须,后面可选参数
- grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。
- hue-rotate(deg) 色相旋转0-360deg
- opacity(%) 透明度0-100%
- saturate(%) 饱和度 0(灰度图)-100%
- sepia(%) 图像转为深褐色
- initial 设置属性为默认值
- inherit 从父元素继承该属性