CSS3 filter(滤镜)属性

栏目: CSS · 发布时间: 6年前

内容简介:css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。

css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。

CSS3 filter(滤镜)属性

一、blur(px)高斯模糊

CSS3 filter(滤镜)属性

二、brightness(%)亮度

CSS3 filter(滤镜)属性

三、contrast(%)对比度

CSS3 filter(滤镜)属性

四、drop-shadow()阴影

CSS3 filter(滤镜)属性

注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图

CSS3 filter(滤镜)属性

图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个图片加阴影,而 drop-shadow 只是给不透明的部分加阴影,这是他们最重要的区别了。

五、grayscale(%)灰度

CSS3 filter(滤镜)属性

六、hue-rotate(deg)色相旋转

CSS3 filter(滤镜)属性

七、invert(%)反转

CSS3 filter(滤镜)属性

八、opacity(%)透明度

CSS3 filter(滤镜)属性

九、saturate(%)饱和度

CSS3 filter(滤镜)属性

十、sapia(%)深褐色

CSS3 filter(滤镜)属性

上面都只是把每种滤镜单独拿出来,展示效果,但是其实他们是可以一起使用的,比如这样

CSS3 filter(滤镜)属性

.all img{
    filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Programming PHP

Programming PHP

Rasmus Lerdorf、Kevin Tatroe、Peter MacIntyre / O'Reilly Media / 2006-5-5 / USD 39.99

Programming PHP, 2nd Edition, is the authoritative guide to PHP 5 and is filled with the unique knowledge of the creator of PHP (Rasmus Lerdorf) and other PHP experts. When it comes to creating websit......一起来看看 《Programming PHP》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试