CSS3 filter（滤镜）属性

haoguo 发布于2019-08-30 10:58 / 950人阅读

摘要：的滤镜属性，可以对网页中的图片进行类似图片处理的效果，例如背景的毛玻璃效果老照片黑白照片火焰效果等。理论上说，对比度是指画面黑白明暗的层次饱和度画面中色彩的鲜艳程度与层次

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

一、blur(px)高斯模糊

二、brightness(%)亮度

三、contrast(%)对比度

四、drop-shadow()阴影

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

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

五、grayscale(%)灰度

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

七、invert(%)反转

八、opacity(%)透明度

九、saturate(%)饱和度

十、sepia(%)深褐色

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

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

注：饱和度和对比度是两个完全不同的概念，饱和对是对色彩的浓度（纯度）的定义；对比度是对画面明暗程度的定义。
理论上说，对比度是指画面黑白明暗的层次；饱和度画面中色彩的鲜艳程度与层次；

GPU云服务器云服务器图片滤镜直播滤镜滤镜滤镜开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114683.html

CSS3 filter（滤镜）属性

摘要：的滤镜属性，可以对网页中的图片进行类似图片处理的效果，例如背景的毛玻璃效果老照片黑白照片火焰效果等。五灰度六色相旋转七反转八透明度九饱和度十深褐色上面都只是把每种滤镜单独拿出来，展示效果，但是其实他们是可以一起使用的，比如这样 css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 showIm...

shevy 2019-08-02 15:07 评论0 收藏0
不得不收藏的——IE中CSS-filter滤镜小知识大全

摘要：属性特性描述可选值，布尔值，默认值为，启用过滤器为不启用过滤器。正常显示，内容对象将翻过来。，设置对象是否投影，布尔值，和，设置对象投影不透明度，，假如为那么该值无效。前言前段时间在做一个专题的时候用到了opacity不透明度属性，因为设计图上是半透明背景，白色文字 showImg(https://segmentfault.com/img/bVknaX); 所以在IE用到了其...

yuanzhanghu 2019-08-28 18:03 评论0 收藏0
JavaScript写一个简单的Ps滤镜效果

摘要：给图像设置一个阴影效果。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。效果预览 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其实非常非常赶单~CSS3多了一个filter的属性，非常强大（兼容性一般）！我们只要根据输入的值/滑...

王陆宽 2019-08-23 15:57 评论0 收藏0
JavaScript写一个简单的Ps滤镜效果

摘要：给图像设置一个阴影效果。一值设定图像会被调整的色环角度值。的价值是完全反转。超过的值是允许的，则有更高的饱和度。值为则完全是深褐色的，值为图像无变化。效果预览 showImg(https://segmentfault.com/img/bVbpSTz?w=648&h=729); 思路其实非常非常赶单~CSS3多了一个filter的属性，非常强大（兼容性一般）！我们只要根据输入的值/滑...

voyagelab 2019-08-02 14:30 评论0 收藏0