CSS3 Filter属性

Filter - 模糊和改变元素颜色

CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。, 定义元素的可视效果, 通常用在 标签上

1. blur(px)高斯模糊, 值越大越模糊 - px

filter: blur(2px);
兼容
-webkit-filter: blur(5px); 

2. brightness(%)调整亮度, 值越低, 图片越暗. 值可以大于100% - %

filter: brightness(30%);

filter: brightness(300%);

3. contrast(%)调整图像对比度, 默认值是1 , 如果是0%,图片会全黑, 值可以超过100% - %

filter: contrast(30%);

4. drop-shadow()给图像设置阴影效果. 和 box-shadow属性很相似
参数:

• offset-x、offset-y必须的参数: offset-x水平方向距离. offset-y 垂直方向距离
• blur-radius可选参数: 值越大，越模糊，则阴影会变得更大更淡.不允许负值. 默认为0
• spread-radius可选参数: 正值会使阴影扩张和变大，负值会是阴影缩小. 默认是0
• color可选参数: 阴影颜色 若未设定，颜色值基于浏览器。

filter: drop-shadow(5px 5px 5px #333);

5. grayscale(%)将图片转换为灰度图像. 值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间. 默认为0 - %

filter: grayscale(80%);

6. hue-rotate(deg)
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值, 超过360deg,相当于绕了一圈 - deg

filter: hue-rotate(359deg);
// hover
transition: filter 3s ease;
filter: none;

转变效果

7. invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间. 默认为0 - %

filter: invert(60%);

8. filter: opacity(%);转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间. 默认为1 - %

filter: opacity(20%);

9. saturate(%)转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。值可以超过100 - %

filter: saturate(10%);

filter: saturate(200%);

值越高 图片越鲜艳

10. sepia(%)将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间. 默认为 0 - %

filter: sepia(100%);