CSS3 图片滤镜 (Filters)

滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果,经常使用PhotoShop的人应该非常清楚,每张用 Photoshop制作出来的图片几乎都使用了滤镜进行美化。而CSS滤镜,不需要你使用任何做图软件,用纯CSS就会生成多种的滤镜效果,比如模糊效果,透明效果,色彩反差调整,色彩反相等等;不仅能对图片进行滤镜处理,而且对任何网页元素、甚至视频都可以处理。下面让我们来看看CSS滤镜是如何使用的,看看我们如何用简单的代码创造出漂亮的滤镜效果!

有很多的CSS滤镜(filter)效果可以使用:grayscale(灰度级), blur(模糊), sepia(怀旧老照片效果), saturate(色彩饱和度), opacity(透明度), brightness(亮度), contrast(对比度), hue-rotate(色调), 和 invert(反相)。这些CSS属性的属性值基本上都是0到1之间的数值,但有几个例外,blur属性值以像素为单位,可以是任何整数。而hue-rotate滤镜值以”deg”单位,度数。

下面使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持,建议使用 chrome 阅读):

如何使用 CSS3 滤镜?

很简单,就如同其他的 CSS 属性一样就可以了:

img{
    filter:type(value);
}

和其他的部分 CSS 属性类似,我们需要兼容其他的浏览器写法,不过目前,只有-webkit- 这样的写法(即chrome和safari)支持:

OK, 下面我们来一一介绍:

1、greyscale 图片的灰度

greyscale 这个属性,将会使图片变灰。属性值(value)既可以是分数,也可以是百分数,它的作用是使图片更灰或者不灰。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>灰度</h3>
    <img src="ll.jpg">
</div>

CSS代码:

box img {
    -webkit-filter: grayscale(1);
}

2、blur 图片模糊

blur 滤镜是使图片模糊,模糊的层度来自于设置的属性值。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>图片模糊</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
    -webkit-filter: blur(10px);
}

3、CSS saturate 图片的饱和度

saturate 效果可以增加图片的颜色饱和度;这里的属性值是饱和度的比例,例如百分之两百,而百分之百则是不变。

3.jpg

HTML代码:

<div class="box">
    <h3>图片的饱和度</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
    -webkit-filter: saturate(5);
}

4、Sepia 老照片的效果

Sepia 滤镜对图片的处理效果,犹如回到了五六十年代的那种老照片了。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>老照片</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
    -webkit-filter: sepia(1);
}

5、hue-rotate 色相的旋转

hue-rotate 滤镜是对色相进行旋转,通过色相的旋转,我们可以对图片的色彩进行重组。属性值为 360 度里的值。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>色相的旋转</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
    -webkit-filter: hue-rotate(180deg);
}

6、lnvert 反色,颠倒

lnvert 滤镜是反相效果,看起来就像老相机的底片一样。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>反色,颠倒</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
    -webkit-filter: invert(1);
}

7、brightness 高光,亮度

brightness 滤镜是对图片的亮度进行处理,属性值为百分比。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>高光,亮度</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
   -webkit-filter: brightness(50%);
}

8、contrast 对比度

contrast 滤镜是对图片最亮的地方和最暗的地方进行调整,从而改变图片的均衡感。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>对比度</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
   -webkit-filter: contrast(0.5);
}

9、drop-shadow 阴影效果

drop-shadow 是对图片实现阴影效果,和box-shadow很相似,但是细节上还是有些差异的,具体请看这篇文章

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>阴影效果</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
   -webkit-filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

10、opacity 透明度

opacity 这个滤镜估计就比较熟悉了,是使图片透明,0-1的值。

CSS3 图片滤镜 (Filters)

HTML代码:

<div class="box">
    <h3>透明度</h3>
    <img src="ll.jpg">
</div>

CSS代码:

.box img {
   -webkit-filter: opacity(0.5);
}


目前只有谷歌浏览器完全实现了CSS滤镜功能,火狐浏览器和IE浏览器目前都看不到效果,CSS3里的滤镜给我们提供了更高级的对web图片、视频和网页元素进行个性化的方法。相信在不久的将来CSS滤镜(filter)很快就会在大大小小的网站上流行起来。


原文链接:HelloWeb前端网 » CSS3 图片滤镜 (Filters) » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享