日期:2014-05-17 浏览次数:20917 次
1、 CSS滤镜简介
随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能够为页面添加一些多媒体属性,例如滤镜的和渐变的效果、CSS技术的飞快发展使这些需求成为了现实、从现在开始我要为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter
Properties)、使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本容器、以及其他一些对象、对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替、当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后,网页设计者就可以拥有一个建立动态交互文档的强大工具、也就是CSS
FILTER+ SCRIPT, 这就说明想要建立动态的文档还要一些SCRIPT
(脚本语言)的基础、可视化滤镜属性只能用在HTML控件元素上、所谓的HTML空间元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间、下面列出了HTML合法的控件和它们的说明、
2、 滤镜的应用
1.滤镜的使用
和其它CSS的样式定义方式一样,分为外部引用、内部引用和局部引用三种
2.
Filter样式属性允许一次设定多个滤镜效果,也就是说,可以让一个HTML的元件同时拥有多个滤镜的的效果
3.
如果使用多的滤镜,那么滤镜间要以空格分开, 一个滤镜中的若干参数以逗号分隔, Filter和其他的CSS样式则以分号分开、
4.
部分滤镜要有一定的width与height才能显示出结果,如shadow,blur,alpha等、
5.
在有的滤镜中处理图片时,图片必须是透明的效果图,比如:Glow等
6. 有的滤镜不能应用在图片上,仅对容器有效、
7.
目前仅有IE的最高版本对滤镜支持较全,使用时要考虑浏览者浏览器的兼容性、
3、 alpha滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle ,
opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent ,
startY=iPercent , finishX=iPercent , finishY=iPercent )
Scripting:object.style.filter =
"progid:DXImageTransform.Microsoft.Alpha ( sProperties ) "
? | ? | ? |
? |
|