CSS 滤镜
声明: web前端学习笔记,欢迎大神指点。联系QQ:1522025433.
CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰。只用html制作的网页,对页面内各部分的修饰能力有限且语句烦锁,样式表正是弥补这一缺陷的有力技术,它语句文法简单,只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。当然,样式表的强大还依靠的就是它的滤镜功能。因为有了滤镜,大家就可以轻易地创造出“专业”的艺术效果。
一、什么是样式表滤镜
说到滤镜,其实它并不是对图像进行了什么处理,而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果大家有一些脚本语言的基础,能够把滤镜效果与类似javascript的脚本代码做一些结合,就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多,不过要欣赏到这些滤镜的特效,必须要求用户的浏览器必须在IE4.0/NC6.0之上,因为只有这些版本的浏览器才能支持样式表滤镜效果。
二、常用的样式表滤镜
随着样式表技术的不断成熟,其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们,将可以产生意想不到的效果。在操作上,用户只需要了解具体滤镜的实际效果后,就能根据实际进行微调了。为了使大家能有针对性地使用滤镜,下面就把一些常用滤镜的功能和参数详细介绍如下:
1、滤镜
作用:该滤镜可以实现各种溶入效果,如果大家将该滤镜与网页脚本语言结合起来,对滤镜的参数进行处理的话,就能很轻易地做出淡入淡出的效果来。
语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,
style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
参数:Opacity参数代表图象的起始透明度,其默认的数值是从0到100,0代表完全透明,100代表完全不透明;FinishOpacity是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度,作用范围也是0到100;Style表示透明区域的形状特征,其中“0”代表统一形状,“1”代表线形。“2”代表放射状,“3”代表矩形;startx表示渐变透明效果开始处的X坐标,starty代表渐变透明效果开始处的Y坐标,finishx代表渐变透明效果结束处的X坐标,finishy代表渐变透明效果结束处的Y坐标。
2、模糊滤镜
作用:该滤镜主要是让图象产生一种模糊效果。
语法:{filter:blur(add=add,direction=direction,strength=strength)}
参数:该滤镜主要包括三个参数,其中add是用来指定图象是否被改变成印象派的模糊效果,模糊效果是按顺时针的方向进行的,它的数值应该是ture或false;direction参数是用来设置模糊的方向的,其中0度代表垂直向上,每45度为一个单位,默认值是向左的270度;strength 参数代表有多少像素的宽度将受到模糊影响,缺省的参数值是5个像素,而且该参数值只能使用整数来指定。
3、斜影滤镜
作用:该滤镜主要是为对象建立轮廓的影子效果的,它可以在指定的方向建立物体的投影;
语法:{filter:shadow(color=color,direction=direction)}
参数:斜影滤镜只有两个参数,其中color代表投影的底色,该数值是用英文字母来代替的,例如投影底色是红色的话,就应该设置color=red;direction参数是用来设置投影方向的,如果该数值是0的话,就代表垂直投影,此外该数值每45度为一个单位,它的默认值是向左的270度。
4、发光滤镜
作用:该滤镜可以给图象或者文字产生一种发光效果;
语法:{filter:glow(color=color,strength=strength)}
参数:该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的,不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的,其值为1到255之间的任何整数。
5、灯光滤镜
作用:灯光滤镜是模拟光源来投射文字或者图象,使图象和文字能产生一定的投射效果;
语法:{filter:light}
参数:一旦为对象定义了“light"滤镜属性后,大家就可以调用它的“方法(Method)"来设置或者改变属性,该滤镜可用的方法有:AddAmbient方法是用来加入包围光源的,AddCone方法是用来加入锥形光源的,MoveLight方法是用来移动光源的,Changstrength方法是用来改变光源强度的,Changcolor方法是用来改变光的颜色的,Clear方法是用来清除所有光源的。
6、遮罩滤镜
作用:该滤镜可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样。
语法: {filter:mask(color=color)}
参数:该滤镜的color参数表示覆盖对象表面的颜色,例如如果遮罩颜色为绿色,那么就应该设置color=blue。
7、阴影滤镜
作用:阴影滤镜就是给对象添加阴影效果,其工作原理是建立一个偏移量,加上色彩。
语法:{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}
参数:该滤镜中的Color参数表示投射阴影的颜色,offx 表示水平方向阴影的偏移量,offy 表示竖直方向阴影的偏移量,Positive参数是一个布尔值,其数值如果为TRUE,就为任何的非透明像素建立可见的投影,如果为FASLE,就为透明的像素部分建立透明效果。
8、灰度滤镜
作用:该滤镜主要是将图象对象转换成灰度形式显示。
语法:{filter:gray}
参数:该滤镜没有参数。
9、翻转滤镜
作用:翻转滤镜主要是实现图象对象的水平或者竖直翻转效果。
语法:{filter:filph} {filter:filpv}
参数:这种滤镜也不带参数,其中{filter:filph}是实现水平翻转的,{filter:filpv} 是实现竖直翻转的。
10、X光滤镜
作用:X光滤镜可以让对象反映出它的轮廓并把这些轮廓加亮。
语法: {filter:xray}
参数:该滤镜本身不含有参数。
11、倒置滤镜
作用:使用该滤镜可以把包括色彩、饱和度、和亮度值等对象的可视化属性全部翻转。
语法: {filter:invert}
参数:该滤镜没有参数。
12、波纹滤镜
作用:波纹滤镜可以在水平和竖直方向利用正弦波打乱图象,使图象产生水波效果。
语法:{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
参数:该滤镜的add参数是一个布尔数值,它是用来表示是否要把对象按照波形样式打乱;freq参数是用来设置波纹频率的,也就是指定在对象上一共需要产生多少个完整的波纹;lightstrength参数可以设置波纹光影的增强效果的,其数值范围在0到100之间;phase参数是用来设置正弦波的偏移量的,strength是设置正弦波的振幅大小的。
在IE下使用的滤镜,可以实现很多不错的特效,但是在chrome和火狐opera等浏览器里这些就全都失效了,因为 滤镜只是属于IE浏览器开发下的功能,不支持IE内核的浏览器也就都不支持这些滤镜。 不过一般都支持透明滤镜,只是写法不一样,如下:
所以要都支持这个滤镜,就得两个都写上
二、图片高级-透明图片
(一)网页上常用的图片格式(jpg,png,gif)
支持透明:gif,png(png8,png24,png32)
(二)网页上的图片形式(插入图片和背景图)
(三)插入图片透明
三、网页上常用的图片格式
1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )
2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;
3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;
A.图片背景透明:
.gif:支持
.png8:支持(建议使用)
.png24:IE6不支持,其它内核浏览器支持(PS制作)
.png32:IE6不支持,其它内核浏览器支持
B.图片本身透明
.png24:IE6不支持(ps制作),可用filter兼容。
.png32:IE6不支持,可用filter兼容。
半透明插入图片兼容IE6做法:(使用png32或PS制作的png24半透明图片):
样式:
<style type="text/css">
.alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="图片路径",sizingMethod="scale");width:value;height:value;}
.ie6hidden{_display:none;}
</style>
结构:
<span class="alpha"></span>
<img class="ie6hidden" src="" />
CSS 滤镜的更多相关文章
- 让less编译通过css滤镜
写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...
- CSS 滤镜(IE浏览器专属其他浏览器不支持)
Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...
- 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现
庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...
- WebRTC与CSS滤镜(CSS filter)
我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...
- 19,CSS 滤镜
1.Filter 属性介绍 2.Alpha 滤镜的使用 3.Blur 滤镜的使用 4.Filph.Filpv 滤镜 5.DropShadow 滤镜 6.Glow 滤镜 7.Gray ,Invert,X ...
随机推荐
- ubuntu14.04 桌面版/服务器版安装DevStack教程
官网安装教程链接:https://docs.openstack.org/developer/devstack/ 我在ubuntu14.04 LTS 桌面版/服务器版都安装DevStack成功后,在这里 ...
- jq实现对checkbox的常用操作
场景1:点击checkbox 其他checkbox被选中的都取消 (意思是只能选中一个checkbox) function fn(obj,event){ //obj就是这个this这个对象 ,eve ...
- JAVA记录-maven JDK配置和常用操作
1.pom.xml加入(JDK编译器配置) <build> <finalName>项目名</finalName> <plugins> <plugi ...
- MVC模块化开发方案
核心: 主要利用MVC的区域功能,实现项目模块独立开发和调试. 目标: 各个模块以独立MVC应用程序存在,即模块可独立开发和调试. 动态注册各个模块路由. 一:新建解决方案目录结构 如图: 二:Eas ...
- Linux 命令详解(六)Linux 守护进程的启动方法
Linux 守护进程的启动方法 http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html
- java抽象类与接口回顾
1.抽象类中可以包括成员变量,方法,构造器,初始化块,内部类(接口/枚举)五种成分.2.让A类中包含B方法,又不提供B方法的实现,即抽象方法只有方法签名,没有方法体.3.有抽象方法的类只能被定义成抽象 ...
- Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案
前言 本文为使用图标或快捷方式直接打开网易云音乐的一个从安装说起的到解决问题的简单教程 环境 debian 9.5 理论上使用apt包管理器的发行版均支持 源使用国内的源即可,无需特殊指定 安装网易云 ...
- 20155313 2016-2017-2 《Java程序设计》第五周学习总结
20155313 2016-2017-2 <Java程序设计>第五周学习总结 教材内容学习 第八章 异常处理 程序中总有些意想不到的状况所引发的错误,Java中的错误也以对象方式呈现为ja ...
- TIdHTTP get参数带中文解决方法--请求报文
Post 看起来稍微复杂先,暂不讨论.post 目前按照一般方法有中文名也可以. 拼接时:pointname=九记餐厅&begintime=2017-03-01 00:00:00& 有 ...
- layoutSubviews总结(转)
- (void)setNeedsDisplay - (void)drawRect 但是是用initWithFrame 进行初始化时,当rect的值不为CGRectZero时,也会触发 You shou ...