css filter滤镜的实例讲解

周国辉发布于2019-08-30 13:01 / 1140人阅读

摘要：由于的滤镜可以实现对对普通图像和图像进行特效渲染功能十分强大所以今天特意把滤镜的用法进行大致的总结语法灰度属性可填写范围默认值为即灰度不改变上面介绍了第一种滤镜灰度下面介绍接下来的九种滤镜高斯模糊使用该方法将周围像素点值求和取平均即为该

由于css3的filter滤镜可以实现对对普通图像和SVG图像进行特效渲染,功能十分强大,所以今天特意把filter滤镜的用法进行大致的总结

语法:

element {
        filter: none |  [  ]* 
      }
        


.grayscale {
    filter: graycale(1);
    //灰度属性
    //可填写范围0~1,默认值为0,即灰度不改变
}

上面介绍了第一种滤镜: grayscale(灰度)

下面介绍接下来的九种滤镜

2.blur()高斯模糊

使用:该方法将周围像素点值求和取平均即为该点像素值
参数:此属性接受参数接受长度值,默认值为0

.blur {
    filter: blur(1px)
}

效果:

3.brightness()亮度

使用: 该方法调节图片的亮度
参数: 默认值为1,但所填写值可以大于1,此时图像亮度会继续增强

.brightness {
    filter: brightness(0.6)
}

效果图:

4.contrast对比度

使用: 通过调节对比度使亮处更亮,暗处更暗
参数: 默认值为1,最小值为0,无最大值

.contrast{
    filter: contrast(150%)
}

效果图:

5.drop-shadow设置阴影

使用: 使用效果与box-shadow类似,但浏览器可能会提供加速
参数: 第一二个值是偏移量(允许负值) , 第三个参数表示模糊程度(不允许负值),第四个参数表示颜色

.drop-shadow{
    filter: drop-shadow(20px, 20px, 10px, black)
}

效果图:

6.hue-rotate色相

使用: 用于改变色相(即具体像素的数值)
参数: 用角度表示,当数值为360deg时,图像不变

.hue-rotate{
    filter: hue-rotate(90deg)
}

效果图:

7.invert()图像反转

使用: 对图像进行颜色上的反转
参数: 默认值是0,最大值是1

.invert{
    filter: invert(100%)
}

效果图:

8.opacity透明度

使用: 此样式类似于opacity属性
参数: 0%~100%

.opacity {
    filter: opacity(50%)    
}

效果图:

9.saturate()饱和度

使用: 转换图像饱和度
参数: 默认值是100%, 但超过100%的值是允许的

.saturate{
    filter: saturate(200%)
}

效果图:

![    图片描述][9]

10.sepia褐色加深(会产生一种老照片的感觉)

使用: 将图像转换为褐色
参数: 默认值为0,范围是0~1

.sepia{
    filter: sepia(100%)
}

效果图

11.进行图像的复合处理,可以对图像进行任意的组合以获得想要的结果

.mixture{
    filter:brightness(1.2) contrast(1.2)
}

效果图:

通过filter属性你可以把你喜欢的图片非常容易地修改成易用的样式

......往往会把一件完整的东西化成无数的形象,就像凹凸镜一般,从正面望去,只见一片模糊.

--莎士比亚

混合云专线服务巧用CSS的MASK滤镜实例讲解 css实例 css实例教程

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

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

CSS 火焰？不在话下

摘要：下图是我鼓捣到另外一个小，当到元素的时候，产生火焰效果嗯，这些其实都是对滤镜及混合模式的一些搭配运用。主要几个属性默认大家已经掌握了大概，阅读后可以自行去了解补充更多细节更多精彩技术文章汇总在我的，持续更新，欢迎点个订阅收藏。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：或者...

Cciradih 2019-04-23 11:43 评论0 收藏0
CSS 火焰？不在话下

摘要：今天的小技巧是使用纯生成火焰，逼真一点的火焰。如上图，整个蜡烛的骨架，除去火焰的部分很简单，掠过不讲。利用上述，我们要先生成一个类似火焰形状的三角形。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 评论0 收藏0
CSS 滤镜技巧与细节

摘要：简单来说，滤镜就是提供类似的图形特效，像模糊，锐化或元素变色等功能。常用用法既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的滤镜用法有使用生成毛玻璃效果使用生成整体阴影效果使用生成透明度本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！注意：ie不兼容本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，话...

tinylcy 2019-04-23 13:34 评论0 收藏0
简单说 CSS滤镜 filter属性

摘要：解释的滤镜，也就是属性，主要有下面这几个属性值模糊亮度注意值是，图像无变化。超过，变亮，小于，变暗。阴影注意这个与都是在说阴影，但还是有区别的，看下图。简单说通过的滤镜实现火焰效果说明滤镜主要是用来实现图像的各种特殊效果，css的滤镜是很神奇的。解释 css的滤镜，也就是filter属性，主要有下面这几个属性值 blur（模糊） showImg(https:/...

klinson 2019-08-21 17:23 评论0 收藏0