CSS3 图片滤镜

转载地址:http://www.zhanxin.info/development/2012-12-19-css-filter.html


对图片的处理有很多方法,今天介绍下 CSS3 的图片滤镜。例如灰度,模糊,饱和,老照片等图片滤镜效果。

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

如何使用 CSS3 滤镜?

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

img {
    filter: type(value);
}

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

img {
    filter: type(value);
    -webkit-filter: type(value);
    -moz-filter: type(value);
    -ms-filter: type(value);
    -o-filter: type(value);
}

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

CSS Greyscale

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

DEMO 演示

demo

实现代码

HTML:

<div class="greyscale">
    <img src="images/water.jpg" />
</div>

CSS:

.greyscale img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.greyscale img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
}

CSS Blur

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

DEMO 演示

demo

实现代码

HTML:

<div class="blur">
    <img src="images/water.jpg" />
</div>

CSS:

.blur img {
    filter: url(/static/svg/filter.svg#blur);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
.blur img:hover {
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
}

CSS Saturate

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

DEMO 演示

demo

实现代码

HTML:

<div class="saturate">
    <img src="images/water.jpg" />
</div>

CSS:

.saturate img {
    filter: saturate(500%);
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);
}
.saturate img:hover {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -o-filter: saturate(100%);
    -ms-filter: saturate(100%);
}

CSS Sepia

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

DEMO 演示

demo

实现代码

HTML:

<div class="sepia">
    <img src="images/water.jpg" />
</div>

CSS:

.sepia img {
    filter: sepia(1);
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -o-filter: sepia(1);
    -ms-filter: sepia(1);
}
.sepia img:hover {
    filter: sepia(0);
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -o-filter: sepia(0);
    -ms-filter: sepia(0);
}

CSS Hue Rotate

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

DEMO 演示

demo

实现代码

HTML:

<div class="hue-rotate">
    <img src="images/water.jpg" />
</div>

CSS:

.hue-rotate img {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover {
    filter: hue-rotate(0);
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -o-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
}

CSS Invert

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

DEMO 演示

demo

实现代码

HTML:

<div class="invert">
    <img src="images/water.jpg" />
</div>

CSS:

.invert img {
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
}
.invert img:hover {
    filter: invert(0);
    -webkit-filter: invert(0);
    -moz-filter: invert(0);
    -o-filter: invert(0);
    -ms-filter: invert(0);
}

CSS Brightness

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

DEMO 演示

demo

实现代码

HTML:

<div class="brightness">
    <img src="images/water.jpg" />
</div>

CSS:

.brightness img {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}
.brightness img:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
}

CSS Contrast

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

DEMO 演示

demo

实现代码

HTML:

<div class="contrast">
    <img src="images/water.jpg" />
</div>

CSS:

.contrast img {
    filter: contrast(0.3);
    -webkit-filter: contrast(0.3);
    -moz-filter: contrast(0.3);
    -o-filter: contrast(0.3);
    -ms-filter: contrast(0.3);
}
.contrast img:hover {
    filter: contrast(1);
    -webkit-filter: contrast(1);
    -moz-filter: contrast(1);
    -o-filter: contrast(1);
    -ms-filter: contrast(1);
}

CSS Opacity

Opacity 这个滤镜估计就比较熟悉了,是使图片透明。

DEMO 演示

demo

实现代码

HTML:

<div class="opacity">
    <img src="images/water.jpg" />
</div>

CSS:

.opacity img {
    opacity:0.3;
}
.opacity img:hover {
    opacity:1;
}

结语

本文译自 CSS3 Image Filters,略有不同。经过测试发现,如今的 Firefox 不支持 CSS 的filter属性,如要使用,可以通过使用svg来解决。


没有更多推荐了,返回首页