css中filter滤镜的使用

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。

现在规范中支持的效果有：

  • grayscale 灰度               值为0-1之间的小数 
  • sepia 褐色         值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 透明度     值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const url = "https://www.baidu.com/img/baidu_resultlogo@2.png";
    let html = "";
    [
      {
        name: "灰度100%",
        style: "grayscale(100%)"
      },
      {
        name: "模糊5px",
        style: "blur(5px)"
      },
      {
        name: "3倍亮度",
        style: "brightness(300%)"
      },
      {
        name: "200%对比度",
        style: "contrast(200%)"
      },
      {
        name: "200%饱和度",
        style: "saturate(200%)"
      },
      {
        name: "色相旋转180度",
        style: "hue-rotate(180deg)"
      },
      {
        name: "100%反色",
        style: "invert(100%)"
      },
      {
        name: "50%透明度",
        style: "opacity(50%)"
      },
      {
        name: "阴影",
        style: "drop-shadow(10px 5px 5px #f00)"
      },
      {
        name: "100%透明度",
        style: "opacity(100%)"
      },
      {
        name: "褐色程度70%",
        style: "sepia(70%)"
      }
    ].forEach(({ name, style }) => {
      html += `<div>${name}-${style}: <img src=${url} style="filter: ${style}" /></div><br />`;
    });
    document.body.innerHTML = html;
 

 

预览效果：

 

posted @ 2021-03-02 17:05  试问蟾宫  阅读(192)  评论(0)    收藏  举报