玩转 CSS3 filter 滤镜 | 林鑫的博客-前端博客-web前端技术

玩转 CSS3 filter 滤镜

发表于 | 分类于 | 阅读数 | 喜欢数

CSS3 filter 滤镜为图片提供了非常强大的效果，只需简单地给图片加上 filter 属性，就可以实现 ps 出来的效果。

filter 提供了多种可视效果，而这些效果又可以互相混合，形成新的效果。接下来就用下面这张原图来体验一下 filter 的各种效果。

filter 函数

blur()

高斯模糊。接受一个 css 长度值作为参数，可以是 px/vw/vh/rem 等单位，唯独不能是 % 。值越大越模糊。

1
2
3
4
img{
    -webkit-filter:blur(5px);
    filter:blur(5px);
}

brightness()

亮度，使图片更亮或者更暗。参数为百分比，默认为1。当参数为 0 时，图片全黑；参数可以大于 100%，也可以写成小数点的形式。

1
2
3
4
img{
    -webkit-filter:brightness(.5);
    filter:brightness(.5);
}

contrast()

对比度。对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。参数为百分比，默认为1。

1
2
3
4
img{
    -webkit-filter:contrast(.5);
    filter:contrast(.5);
}

saturate()

饱和度，是图片变暗下来或更加鲜明。参数为百分比，默认为1，可以大于 100%。

1
2
3
4
img{
    -webkit-filter:saturate(200%);
    filter:saturate(200%);
}

opacity()

透明度。跟 CSS3 中的 opacity 属性效果是一致的。而使用 filter，一些浏览器为了提升性能会提供硬件加速。

1
2
3
4
img{
    -webkit-filter:opacity(.5);
    filter:opacity(.5);
}

drop-shadow()

阴影效果。该函数与 CSS3 中的 box-shadow 属性的视觉效果是一致的，参数也跟该属性的值相似。为什么只说相似呢？因为 box-shadow 有个属性值 inset 将阴影效果设为内阴影或者外阴影，而 drop-shadow() 是没有这个参数的。而 spread 参数，兼容却很差，加了也不会渲染，box-shadow 的 spread 值是可以渲染的，所以 drop-shadow() 函数就可以不要写这个参数了。

1
2
3
4
img{
    -webkit-filter:drop-shadow(5px 5px 5px red);
    filter:drop-shadow(5px 5px 5px red);
}

grayscale()

灰度级，将图像转为灰度图像。参数为百分比，默认为0。若设为 100%，则完全转为灰度图像。

1
2
3
4
img{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
}

hue-rotate()

色相旋转。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原色、间色和复色来构成的。hue-rotate() 函数通过旋转角度对色相进行旋转从而改变图像在视觉上的效果。参数为度数，单位为 deg

1
2
3
4
img{
    -webkit-filter:hue-rotate(180deg);
    filter:hue-rotate(180deg);
}

invert()

反色。反色又叫补色，红的补色是绿色，蓝的补色是橙色，黄的补色是紫色，由这三种对比关系可引出很多对比的反色。在“画图”程序中，反色操作是指把画面中的黑色变成白色，白色变成黑色，绿色变成红色，黄色变成紫色。参数为百分比，不能超过 100%。

1
2
3
4
img{
    -webkit-filter:invert(1);
    filter:invert(1);
}

sepia()

将图像转换为深褐色，发黄老旧的效果。参数为百分比，默认为 0，不超过 100%。

1
2
3
4
img{
    -webkit-filter:sepia(.5);
    filter:sepia(.5);
}

复合函数

上面的例子都只是单个效果的展示，而这些效果，都可以混合在一起使用，生成更多的视觉效果。

1
2
3
4
img{
    -webkit-filter:brightness(120%) contrast(70%) saturate(200%) hue-rotate(30deg) drop-shadow(5px 5px 5px green);
    filter:brightness(120%) contrast(70%) saturate(200%) hue-rotate(30deg) drop-shadow(5px 5px 5px green);
}

常见案例

那么这么炫酷的效果，我们可以用到哪些地方呢？

鼠标移上效果

图片默认为灰色，鼠标移上去变回彩色。

1
2
3
4
5
6
7
8
img{
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
}
img:hover{
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
}

毛玻璃

这里是 CSS3 filter 实现的毛玻璃效果
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
.blur-box{
    position: relative;
    width: 300px;
    height: 150px;
    background: url("/images/post/blur.jpg");
    padding-top: 50px;
    background-size: 100% 100%;;
    z-index: -1;
}
.blur-img{
    position: relative;
    width: 180px;
    height: 80px;
    padding: 10px;;
    margin: auto;
    color: #fff;
    overflow: hidden;
}
.blur-img:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("/images/post/blur.jpg") no-repeat;
    background-position: -50px -50px;
    background-size: 300px 200px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index: -1;
}

滑动比较图像

拉动交界线下方可以滑动对比两边效果。这里纯 css 实现，使用了 resize 属性来拉伸，效果不是很好，如果是结合 js，那就会比较完美。

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
.slide-box{
    width: 300px;
    height: 200px;
    position: relative;
    overflow-x: hidden;
}
.slide-box-item{
    height: 100%;
    position: absolute;
    top: 0;
    background: url(/images/post/blur.jpg);
}
.slide-item-1{
    width: 30%;
    left: 0;
    resize: horizontal;
    overflow: auto;
    cursor: w-resize;
    z-index: 2;
}
.slide-item-2{
    width: 70%;
    right: 0;
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
    background-position: -90px 0;
}