1. 首页
  2. IT资讯

纯干货,前端学者的福音!如何使用css滤镜改变图片颜色

“u003Cdivu003Eu003Cpu003E说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fac0c867ecf1c4688a565a9751aa7b244″ img_width=”546″ img_height=”342″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E你以为这些是经过PS软件处理出来的?不不不,只有一张图片,纯粹的是用css写出来的。u003Cu002Fpu003Eu003Cpu003E本文的目标就是:手把手教大家学习CSS滤镜(filter)属性,CSS滤镜提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。u003Cu002Fpu003Eu003Cpu003E使用CSS滤镜只需要如下5步:u003Cu002Fpu003Eu003Cpu003E1. 准备工作u003Cu002Fpu003Eu003Cpu003E2. 使用sublime快速书写HTML结构u003Cu002Fpu003Eu003Cpu003E3. 使用CSS选择器选中目标标签u003Cu002Fpu003Eu003Cpu003E4. CSS滤镜的基本用法u003Cu002Fpu003Eu003Cpu003E5. CSS滤镜实例演示u003Cu002Fpu003Eu003Cpu003E一、第一步 —— 准备工作u003Cu002Fpu003Eu003Cpu003E目标 : 下载并安装sublime以及准备一张图片素材u003Cu002Fpu003Eu003Cpu003E下载对应你操作系统的sublime编辑器,http:u002Fu002Fwww.sublimetext.comu002F3u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff1511d97d3524aebb776045f822017bd” img_width=”560″ img_height=”209″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E图片素材:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff8b9f0f60da8460b99668775fee55deb” img_width=”400″ img_height=”249″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 准备好代码编辑器,比如sublime,hbuilder,vscode等编辑,都是可以的,再准备一张图片素材u003Cu002Fpu003Eu003Cpu003E二、第二步 —— 书写HTML结构u003Cu002Fpu003Eu003Cpu003E目标 : 使用sublime编辑器快速生成HTML5结构的页面u003Cu002Fpu003Eu003Cpu003E1. 安装sublime以后,并打开sublime.exeu003Cu002Fpu003Eu003Cpu003E2. 在电脑的某个目下新建一个空目录code,将我们的图片素材放一个images文件夹下,并把这个images文件夹也放在code中u003Cu002Fpu003Eu003Cpu003E3. 使用sublime打开我们刚准备好的code文件夹u003Cu002Fpu003Eu003Cpu003E4. 使用sublime新建一个HTML网页文件,后缀名需要为htmlu003Cu002Fpu003Eu003Cpu003E5. 接着输入一个英文输入状态下的!再按tab键,即可快速生成HTML5的基本结构!u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F2d54b7422b834117a95a57a5f282d809″ img_width=”560″ img_height=”226″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E6. 在网页中插入内容u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F4e7aeba4ce834a8b9f700322aeb13b5f” img_width=”560″ img_height=”310″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 使用代码编辑器新建网页文件,并加入两张img图片标签,正确引入图片u003Cu002Fpu003Eu003Cpu003E三、第三步 —— 使用CSS选择器选中目标标签u003Cu002Fpu003Eu003Cpu003E目标:使用CSS类选择器选中我们页面中的目标图片标签, 格式 .类名u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F446f6db163bc4109830a601e51b3911c” img_width=”560″ img_height=”354″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : 使用 css类选择 格式: .类名 选中对应的目标标签u003Cu002Fpu003Eu003Cpu003E四、第四步 —— CSS滤镜的基本用法u003Cu002Fpu003Eu003Cpu003E目标:了解CSS滤镜的基本用法以及各方法之间效果差异u003Cu002Fpu003Eu003Cpu003E1. CSS滤镜基本语法u003Cu002Fpu003Eu003Cpu003Efilter: function(param);u003Cu002Fpu003Eu003Cpu003Efilter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;u003Cu002Fpu003Eu003Cpu003E提示:允许同时使用多个滤镜,多个滤镜效果之间使用空格分隔。u003Cu002Fpu003Eu003Cpu003E2. CSS滤镜支持的方法(function)有u003Cu002Fpu003Eu003Cpu003E– grayscale 灰度u003Cu002Fpu003Eu003Cpu003E– sepia 褐色u003Cu002Fpu003Eu003Cpu003E– saturate 饱和度u003Cu002Fpu003Eu003Cpu003E– hue-rotate 色相旋转u003Cu002Fpu003Eu003Cpu003E– invert 反色u003Cu002Fpu003Eu003Cpu003E– opacity 透明度u003Cu002Fpu003Eu003Cpu003E– brightness 亮度u003Cu002Fpu003Eu003Cpu003E– contrast 对比度u003Cu002Fpu003Eu003Cpu003E– blur 模糊u003Cu002Fpu003Eu003Cpu003E– drop-shadow 阴影u003Cu002Fpu003Eu003Cpu003E注意:为了实现兼容性,我们加上-webkit- 前缀u003Cu002Fpu003Eu003Cpu003E-webkit-filter : function (param);u003Cu002Fpu003Eu003Cpu003E3. filter函数u003Cu002Fpu003Eu003Cpu003E注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F75e46f775e054706b5546d7b0e2836aa” img_width=”698″ img_height=”795″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F016c3d838963465187280ed8d507ce76″ img_width=”689″ img_height=”630″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;u003Cu002Fpu003Eu003Cpu003E五、第五步 —— CSS滤镜实例演示u003Cu002Fpu003Eu003Cpu003E目标:理解CSS滤镜各种效果之间的不同u003Cu002Fpu003Eu003Cpu003E1. 模糊: blur(长度值) 值越大越模糊 这个参数可设置css长度值,但不接受百分比值u003Cu002Fpu003Eu003Cpu003Efilter : blur(2px);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : blur(2px);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F828bc8ff06364ef5be43838a5f8b0844″ img_width=”560″ img_height=”332″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E值越大越模糊u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F63fb4a0792e44f839d511426b62e3117″ img_width=”560″ img_height=”338″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E2. 亮度 : brightness(百分比) 如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。u003Cu002Fpu003Eu003Cpu003Efilter : brightness(30%);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : brightness(30%);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F017828c94ac44710b4ceb232b7d7a7ab” img_width=”560″ img_height=”343″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F9c9ac1513b5746dc94ffd4cbfa266447″ img_width=”560″ img_height=”343″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E3. 对比度 : contrast(%) 值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。u003Cu002Fpu003Eu003Cpu003Efilter : contrast(0);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : contrast(0);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff30b415a3e044f929227d164f03e6a5b” img_width=”560″ img_height=”329″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fa375a4a042cf4d819d1e6dfc8da3fc55″ img_width=”560″ img_height=”343″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E4. 阴影 : drop-shadows(阴影水平偏移位置 阴影垂直偏移位置 阴影模糊程度 阴影颜色)u003Cu002Fpu003Eu003Cpu003Eu002F*drop-shadows(阴影水平偏移位置 阴影垂直偏移位置 阴影模糊程度 阴影颜色)*u002Fu003Cu002Fpu003Eu003Cpu003Efilter : drop-shadow(10px 10px 5px #000);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : drop-shadow(10px 10px 5px #000);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F029d1f08c17a4f63a89b6d0874dbcd82″ img_width=”560″ img_height=”261″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fbacf3da23b774571aaf5b75343fdc980″ img_width=”560″ img_height=”256″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E5. 灰度 : grayscalel(%) 值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0u003Cu002Fpu003Eu003Cpu003Efilter : grayscale(100%);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : grayscale(100%);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F919a3367efe24b969d2f2fb7117ebfb6″ img_width=”560″ img_height=”340″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fe07b9a3b7a224d00b8ca351d4c67d094″ img_width=”560″ img_height=”347″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E6. 色相旋转 : hue-rotate(deg) deg为旋转度数,如果值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。u003Cu002Fpu003Eu003Cpu003Efilter : hue-rotate(50deg);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : hue-rotate(50deg);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fc7e7507583fe4021b2a31c9cd3830673″ img_width=”560″ img_height=”345″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F09137fe254e04d12866fa14cf703da26″ img_width=”560″ img_height=”330″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E7. 反色 : invert(%) 如果100%的值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。u003Cu002Fpu003Eu003Cpu003Efilter : invert(100%);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : invert(100%);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F8b84838810614d9eafcb2ce98825a62c” img_width=”560″ img_height=”327″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fec5d14b172e748d7b1912f979944030e” img_width=”560″ img_height=”341″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E8. 透明度 : opacity(%) 值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。u003Cu002Fpu003Eu003Cpu003Efilter : opacity(.5);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : opacity(.5);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Ffd9cb3db59654af7ae283a06467dd3fa” img_width=”560″ img_height=”341″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E9. 饱和度 : saturate(%) 值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。u003Cu002Fpu003Eu003Cpu003Eu002F*5代表500%*u002Fu003Cu002Fpu003Eu003Cpu003Efilter : saturate(5);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : saturate(5);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fff07d00d692141cfbacc335c5164d221″ img_width=”560″ img_height=”330″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E10. 褐色(有种复古的旧照片感觉) : sepia(%) 值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;u003Cu002Fpu003Eu003Cpu003Efilter : sepia(100%);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : sepia(100%);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F7960a83804c6476b93e44b44acf03d30″ img_width=”560″ img_height=”336″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E11. 使用多个滤镜,每个滤镜使用空格分隔。 注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。 顺序有可能会导致效果不一样。u003Cu002Fpu003Eu003Cpu003Eu002F*使用多个滤镜,每个滤镜使用空格分隔。*u002Fu003Cu002Fpu003Eu003Cpu003Efilter: contrast(200%) brightness(150%) hue-rotate(50deg);u003Cu002Fpu003Eu003Cpu003E-webkit-filter: contrast(200%) brightness(150%) hue-rotate(50deg);u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F86a2846b82814dfdb2347c796e94f80e” img_width=”560″ img_height=”255″ alt=”纯干货,前端学者的福音!如何使用css滤镜改变图片颜色” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E小结 : filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px,px,px,color) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) ;u003Cu002Fpu003Eu003Cpu003E总结u003Cu002Fpu003Eu003Cpu003E到此,我们已经对CSS滤镜有了一定的初步了解,在以后开发过程中,可以根据我们所需要的效果,选择使用相应的CSS滤镜效果。u003Cu002Fpu003Eu003Cpu003E我们再来回顾一下,我们刚刚实现的步骤u003Cu002Fpu003Eu003Cpu003E1. 准备工作:下载sublime代码编辑器以及准备图片素材u003Cu002Fpu003Eu003Cpu003E2. 书写HTML基本结构:使用sublime创建一个HTML文件以后,输入!以后再按tab键,在body标签中插入相应标签,并正确引入图片u003Cu002Fpu003Eu003Cpu003E3. 使用CSS选择器选中目标标签:我们使用的是CSS类选择器,通过标签的class属性值获取目标标签u003Cu002Fpu003Eu003Cpu003E4. CSS滤镜的基本使用: CSS滤镜语法u003Cu002Fpu003Eu003Cpu003Efilter: function(param);u003Cu002Fpu003Eu003Cpu003Efilter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();u003Cu002Fpu003Eu003Cpu003Eu002F*为了实现兼容性,我们加上-webkit- *u002Fu003Cu002Fpu003Eu003Cpu003E-webkit-filter : function (param);u003Cu002Fpu003Eu003Cpu003E-webkit-filter : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();u003Cu002Fpu003Eu003Cpu003Eu002F*提示: 允许多个滤镜,之间使用空格分隔。*u002Fu003Cu002Fpu003Eu003Cpu003E5. CSS滤镜实例演示 : 通过代码演示,了解各个滤镜之间不同的效果u003Cu002Fpu003Eu003Cpu003E– grayscale 灰度u003Cu002Fpu003Eu003Cpu003E– sepia 褐色u003Cu002Fpu003Eu003Cpu003E– saturate 饱和度u003Cu002Fpu003Eu003Cpu003E– hue-rotate 色相旋转u003Cu002Fpu003Eu003Cpu003E– invert 反色u003Cu002Fpu003Eu003Cpu003E– opacity 透明度u003Cu002Fpu003Eu003Cpu003E– brightness 亮度u003Cu002Fpu003Eu003Cpu003E– contrast 对比度u003Cu002Fpu003Eu003Cpu003E– blur 模糊u003Cu002Fpu003Eu003Cpu003E– drop-shadow 阴影u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/26916.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code