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);
}

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

查看所有标签

猜你喜欢:

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

Dive Into Python 3

Dive Into Python 3

Mark Pilgrim / Apress / 2009-11-6 / USD 44.99

Mark Pilgrim's Dive Into Python 3 is a hands-on guide to Python 3 (the latest version of the Python language) and its differences from Python 2. As in the original book, Dive Into Python, each chapter......一起来看看 《Dive Into Python 3》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具