CSS - filter 属性

image.png

filter 属性定义元素的视觉效果（比如模糊和饱和度）。

👍狠狠戳我 → 瞎搞CSS - filter

1. blur(radius) (高斯模糊)

将高斯模糊应用于输入图像；
radius 是模糊的半径，值越大越模糊，默认是 0

image.png

.demo {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

2.brightness(amount) (亮度)

将线性乘数应用于输入图像，使其看起来更亮或更暗;
amount 默认值是 1 无效果;
amount 值低于 100% 图片变暗;
amount 值超过 100% 变亮;
amount 值为 0% 全黑；

image.png

.demo {
  -webkit-filter: brightness(150%);
  filter: brightness(150%);
}

3.contrast(amount) (对比度)

调整输入图像的对比度;
amount 默认值是 1 无效果;
amount 值超过 100% 运用更低的对比;
amount 值为 0% 完全灰色；

image.png

.demo {
  -webkit-filter: contrast(50%);
  filter: contrast(50%);
}

4.grayscale(amount) (灰度)

改变输入图像灰度;
amount 默认值是 0 无效果;
amount 取值 0% - 100%;
amount 值为 100% 完全灰度；

image.png

.demo {
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

5.hue-rotate(angle) (色相旋转)

在输入图像上应用色相旋转;
angle 默认值是 0 无效果;
angle 取值 0deg - 360deg;

image.png

.demo {
  -webkit-filter: hue-rotate(50deg);
  filter: hue-rotate(50deg);
}

6.invert(amount) (反色)

反转输入图像；
amount 默认值是 0 无效果;
amount 取值 0% - 100%;

image.png

.demo {
  -webkit-filter: invert(30%);
  filter: invert(30%);
}

7.opacity(amount) (透明度)

转化图像的透明程度；
amount 默认值是 1 无效果;
amount 值为 0% 完全透明;
amount 取值 0% - 100%;

image.png

.demo {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}

8.saturate(amount) (饱和度)

转换图像饱和度;
amount 默认值是 1 无效果;
amount 值为 0% 完全不饱和;
amount 值超过 100% 更高的饱和度;

image.png

.demo {
  -webkit-filter: saturate(200%);
  filter: saturate(200%);
}

9.sepia(amount) (深褐色)

将图像转换为深褐色;
amount 默认值是 0 无效果;
amount 值为 100% 完全深褐色;
amount 取值 0% - 100%;

image.png

.demo {
  -webkit-filter: sepia(50%);
  filter: sepia(50%);
}

10.drop-shadow(offset-x offset-y blur-radius spread-radius color) (阴影)

对输入图像应用阴影效果；
offset-x 水平方向的偏移值，负值会使阴影出现在元素左边;
offset-y 垂直方向的偏移值，负值会使阴影出现在元素上方;
blur-radius 值越大，越模糊，不允许负值。默认是 0;
spread-radius 阴影的扩展半径（大多数浏览器不支持这个参数;如果使用，效果将不会呈现）;
color 阴影的颜色;

image.png

.demo {
  -webkit-filter: drop-shadow(15px 15px 5px rgba(144, 238, 144, 1));
  filter: drop-shadow(15px 15px 5px rgba(144, 238, 144, 1));
}

11.url() (滤镜终极方案)

获取指向 SVG 滤镜的 URI，该 SVG filter可以嵌入到外部 XML 文件中;

<!-- filter.svg 文件 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full">     
  <defs>
    <!-- 此处定义滤镜 -->
    <filter id="filter">
        <!-- 高斯模糊 -->
        <feGaussianBlur stdDeviation="5"/>
    </filter>
  </defs>
</svg>

这里只是举了一个例子，简单的了解怎么使用即可，反正我不想瞎搞了，其他更多配置查看这里：filter - SVG：可缩放矢量图形 | MDN (mozilla.org)

.demo {
  -webkit-filter: url(https://www.intolearn.com/css/assets/filter-b8489c33.svg#filter);
  filter: url(https://www.intolearn.com/css/assets/filter-b8489c33.svg#filter);
}

image.png

复合函数

你可以组合任意数量的函数来控制渲染。顺序会影响最终呈现效果

image.png

.demo {
  -webkit-filter: brightness(200%) contrast(50%); 
  filter: brightness(200%) contrast(50%);
}
.demo2 {
  -webkit-filter: contrast(50%) brightness(200%); 
  filter: contrast(50%) brightness(200%);
}

参考

1. filter - CSS：层叠样式表 | MDN (mozilla.org)
2. filter - SVG：可缩放矢量图形 | MDN (mozilla.org)