CSS FILTERS:CSS过滤器能够做什么?
CSS过滤器(CSS filters)已经被推出有很长一段时间了。它最初是为了向SVG矢量图提供不同的图片效果。现在,CSS filters 不在局限于在SVG中使用,也可以在图片、文字和其它元素上使用。
CSS过滤器效果并不难理解。如果你曾经使用过photoshop,那么你就会知道每一个图层都可以使用不同的过滤效果:正片叠加、滤色、叠加等等。CSS过滤器实现的功能与之类似,它能将图片渲染为一种特殊的效果。
CSS过滤器对页面性能是有影响的,不可以滥用。如果你整个页面很多地方都使用了CSS过滤器来渲染,那么 你的页面将会加载得十分慢。
使用CSS过滤器
我们将使用下面的这张图片来结束各种不同的CSS过滤器效果。
CSS过滤器的语法非常简单:filter:属性名称(取值)
。属性的取值决定该种过滤此效果的深度。例如下面grayscale
属性分别取值为100%、50%和10%。
img { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% );}
img { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% );}
img { -webkit-filter: grayscale( 10% ); filter: grayscale( 10% );}
|
上面的语句得到的效果如下:
CSS Filter:filter: grayscale(100%); CSS Filter:filter: grayscale(50%); CSS Filter:filter: grayscale(10%);
上面每一个百分比数值对应一种效果,它的意思是:这张图片需要多少的灰度值。如果你需要将图片转换为黑白色,使用的值是100%。
你也可以同时为一张图片应用多个过滤器,它们会按层级的顺序被执行。例如下面的例子,图片先被转换为100%的黑白色,然后透明度降低到50%。如果你使用了很多的过滤器如:饱和度、色相反转等,那么它们的书写顺序是非常重要的,这会直接影响最终得到的效果。
img {
-webkit-filter: grayscale( 100% ) opacity( 50% );
filter: grayscale( 100% ) opacity( 50% );
}
|
CSS过滤器介绍
GRAYSCALE
Grayscale是灰度滤镜,前面已经做了介绍:
img { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% );}
|
SEPIA
Sepia是复古风格滤镜。和Grayscale滤镜一样,它的取值可以从0%到100%。
img { -webkit-filter: sepia( 100% ); filter: sepia( 100% );}
|
SATURATION
Saturation是饱和度滤镜。它能将图片的颜色变得更浓烈。饱和度滤镜的最大取值不是100%,你可以指定一个很大的值,如1000,使图片的视觉效果变得非常夸张。
img { -webkit-filter: saturate( 1000% ); filter: saturate( 1000% );}
|
BLUR
Blur是模糊滤镜。它的效果和在photoshop中对图片使用高斯模糊的效果是一样的。你可以设置一个一像素为单位的值,这个值表示模糊的大小。像素值越高,图片就越模糊。
img { -webkit-filter: blur( 5px ); filter: blur( 5px );}
|
HUE-ROTATE
Hue-rotate是色相反转滤镜。这个滤镜和前面的滤镜相比有些难理解:它使用角度值来转换元素的颜色。这有一点像HSL颜色d的色环,从0度开始,旋转一周是360度。你所要做的就是选择色环上的某个点(某个角度)来作为色相反转的值。
img { -webkit-filter: hue- rotate ( 45 deg); filter: hue- rotate ( 45 deg);}
img { -webkit-filter: hue- rotate ( 90 deg); filter: hue- rotate ( 90 deg);}
img { -webkit-filter: hue- rotate ( 180 deg); filter: hue- rotate ( 180 deg);}
|
CSS hue-rotate Filter: hue-rotate(45deg); CSS hue-rotate Filter: hue-rotate(90deg); CSS hue-rotate Filter: hue-rotate(180deg);
INVERT
Invert是颜色反转滤镜。颜色反转滤镜可以将黑色转换为白色,红色转换为绿色等等。它有一点像色相反转滤镜,但是它的取值基于百分比,0%表示颜色不改变,100%表示颜色完全反转。
img { -webkit-filter: invert ( 100% ); filter: invert ( 100% ); }
|
CONTRAST
Contrast是对比度滤镜。如果一张图片没有色彩对比度,它通常是一张灰度很深的图片。对比度滤镜取值100%时不会改变图片,这是图片的默认状态。如果你不想使用对比度效果,设置为0%。如果你想要一张图片有很大的对比度,或者想是图片中的元素都变成纯色,可以设置一个很大的百分比值,如2500%,当然这是一个非常夸张的值。
img { -webkit-filter: contrast( 25% ); filter: contrast( 25% );}
img { -webkit-filter: contrast( 2500% ); filter: contrast( 2500% );}
|
CSS contrast Filter: contrast(25%); CSS contrast Filter: contrast(2500%);
BRIGHTNESS
Brightness是明亮度滤镜。正如它的名字,明亮度滤镜用于改变图片的明亮度。当它取值为100%的时候,图片不被改变,这和对比度滤镜是一样的。你可以增加百分比来使图片变亮,或降低百分比使图片变暗。
img { -webkit-filter: brightness( 50% ); filter: brightness( 50% );}
img { -webkit-filter: brightness( 150% ); filter: brightness( 150% );}
|
CSS brightness Filter: brightness(50%); CSS brightness Filter: brightness(150%);
DROP SHADOW
Drop Shadow是阴影滤镜。你也许会问:盒子阴影和文字阴影不是有专门的CSS属性吗?为什么我们还要使用这个阴影滤镜。没错!box-shadow
和text-shadow
属性可以很好的工作在规则的容器和文字上,但是对于不规则的形状,它们就有些无能为力了。例如一张透明的PNG图片或一个五角星形状。Drop Shadow阴影滤镜会制作一个图形的副本,然后使用你设定的值来进行位移,并渲染为你设定的颜色。如下面的例子所示,第一个值是X方向上的位移,第二个值是Y轴方向上的位移,第三个值是模糊的大小,第四个值是模糊的颜色。
img {
-webkit-filter: drop-shadow( 5px 5px 5px red );
filter: drop-shadow( 5px 5px 5px red );
}
|
小结
使用CSS过滤器可以在不使用photoshop等图像编辑软件的情况下将图片制作出各种特殊的效果。如果你想制作更复杂的图像效果,可以使用CSS的合成模式。希望这篇文章对你有所帮助!
CSS FILTERS:CSS过滤器能够做什么?相关推荐
- 母亲节不能陪在妈妈身边,用CSS和JS给妈妈做了一个爱心飘落
母亲节不能陪在妈妈身边,我用css和js给妈妈做了一个爱心飘落
- h5 高斯模糊_CSS滤镜工具 轻松实现多种照片特效 – css Filters
CSS滤镜工具 轻松实现多种照片特效 – css Filters 九月 19, 2016 评论 Sponsor 今天和大家分享一款在线 CSS 滤镜工具,CSS 中有一个 filter 属性,可以为元 ...
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先来探讨一下filter. 首先来说明一 ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- css expressionr,CSS自定义属性expression_r
CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心.有了CSS的自定义属性expr ...
- html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- [css] 用CSS实现一个轮播图
[css] 用CSS实现一个轮播图 使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
- CSS Reset(css的初始化)
不同的浏览器对每种的标签都有默认的样式.大部分浏览器的样式还有点区别.为了保证让所有的标签的样式清零,也就是重置,以便于我们后续的开发和管 理,一般都会在网站一开始对所有的标签做一下样式的重置操作,为 ...
最新文章
- [K/3Cloud]关于数据库sa密码更改,管理中心登录不上的问题。
- 第十二篇:形式语言理论与有限状态自动机
- 您必须在sources.list中指定代码源_python如何从源代码构建lxml
- 软件分享大会之Bonny使用感想
- 动态内存分配---数组
- 树莓派获4500万美元融资,估值已达5亿美元,去年创下了710万台销量纪录
- Java代码03-打印一个菱形
- Array K-Coloring
- Linux系统中安装nodejs的步骤教程
- Java类和对象初始化
- 三维空间两直线/线段最短距离、线段计算算法 【转】
- 红外线遥控c语言程序,红外线遥控解码接收程序-c语言讲解学习.pdf
- canvas画条形图 微信小程序_小程序-引入 echart 图表画圆饼图
- 编辑框CEdit自动换行简单设置
- 北上广深的请注意,阿里聚安全来找你玩啦~
- Android之解决太大太多图片造成的oom
- easydarwin 安装_使用EasyDarwin搭建流服务器
- 文献阅读笔记:北极气溶胶与气候
- px4官网调参指南 多旋翼无人机PID调参指南
- python二进制转中文_python3 二进制转中文
热门文章
- 用OneR算法对Iris植物数据进行分类
- 插值MATLAB实现(牛顿差商、插值误差、龙格现象、切比雪夫插值)
- 交替性注意力_如何从心理学角度解释“专注力”,“专注力”对一个人的影响?...
- CF572_Div2_D2
- [Java]list集合为空或为null的区别
- Servlet,GenericServlet和HttpServlet的继承关系
- 14-jQuery补充
- 蛙蛙推荐:几种典型的生产环境调试场景
- .net微软消息队列(msmq)简单案例
- Android 通过 XMPP 实现聊天功能,App Engine Assisted Group Chat (开源)