对图片的处理有很多方法，今天chrafz介绍下 CSS3 的图片滤镜。例如灰度，模糊，饱和，老照片等图片滤镜效果。
几种CSS3图片滤镜效果 张弦先生のchrafz.com
我们可以使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持，建议使用 chrome )：
- Greyscale(灰度)
- Blur(模糊)
- Saturate（饱和)
- Sepia(老照片)
- Hue Rotate(色相旋转)
- Invert(颠倒)
- Brightness(高光)
- Contrast(对比)
- Opacity(透明度)
如何使用 CSS3 滤镜？
很简单，就如同其他的 CSS 属性一样就可以了：
|
1 2 3 |
img { filter: type(value); } |
和其他的部分 CSS 属性类似，我们需要兼容其他的浏览器写法，不过目前，只有-webkit这样的写法（即chrome和safari）支持：
|
1 2 3 4 5 6 7 |
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)既可以是分数，也可以是百分数，它的作用是使图片更灰或者不灰。
HTML:
|
1 2 3 |
<div class="greyscale"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 滤镜是使图片模糊。模糊的层度来自于设置的属性值。
HTML:
|
1 2 3 |
<div class="blur"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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 效果可以增加图片的颜色饱和度。这里的属性值是饱和度的比例，例如百分之两百，而百分之百则是不变。
HTML:
|
1 2 3 |
<div class="saturate"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 滤镜对图片的处理效果，犹如回到了五六十年代的那种老照片了。
HTML:
|
1 2 3 |
<div class="sepia"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 度里的值。
HTML:
|
1 2 3 |
<div class="hue-rotate"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 滤镜是反相效果，看起来就像老相机的底片一样。
HTML:
|
1 2 3 |
<div class="invert"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 滤镜是对图片的亮度进行处理，属性值为百分比。
HTML:
|
1 2 3 |
<div class="brightness"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。
HTML:
|
1 2 3 |
<div class="contrast"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 这个滤镜估计就比较熟悉了，是使图片透明。
HTML:
|
1 2 3 |
<div class="opacity"> <img src="images/heaven.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 |
.opacity img { opacity:0.3; } .opacity img:hover { opacity:1; } |
结语
经过测试发现，如今的 Firefox 不支持 CSS 的filter属性，如要使用，可以通过使用svg来解决。
支付宝扫一扫
微信扫一扫原创文章，作者：张弦先生，如若转载，请注明出处：《几种CSS3图片滤镜效果》https://www.chrafz.com/3241.html
