css滤镜效果 CSSMicrosoft浏览器IE脚本
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 ) "
|
4、 blur滤镜
语法: CSS:filter:blur(add=add,direction=direction,strength=strength) Scripting: [oblurfilter=] object.filters.blur |
|
5、 FlipH, FlipV 滤镜
FlipH, FlipV 滤镜(水平反转和垂直反转)
语法:
FlipH 滤镜语法 {filter:filph}
FlipV 滤镜语法
{filter:filpv}
6、 Glow滤镜
语法: CSS:filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance ) Scripting:object.style.filter = "progid:DXImageTransform.Microsoft.Glow ( sProperties ) " 环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。
|
|
7、 Gray滤镜
语法: CSS:filter : Gray ( enabled=bEnabled ) Scripting:object.style.filter = "Gray ( sProperties ) " 设置对象灰度显示 |
|
8、 Invert滤镜
语法: CSS:filter:Invert(enabled=bEnabled) Scripting:object.style.filter = "Invert(sProperties)" 反相显示对象内容 |
|
9、 light滤镜
语法: CSS:filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled ) Scripting:object.style.filter = "progid:DXImageTransform.Microsoft.Light ( sProperties ) " 为对象的内容建立光照效果 每个滤镜最多可以添加 10 束光。如果想在页面上添加更多的光,必须使用多个滤镜。 |
|
语法: CSS:filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor ) Scripting:object.style.filter = "progid:DXImageTransform.Microsoft.MaskFilter ( sProperties ) " 将对象内容的透明像素用 color 参数指定的颜色显示作为一个遮罩,而非透明像素则转为透明。 |
|
11、xray滤镜
语法:
CSS:filter:xray(enabled=bEnabled)
Scripting:object.style.filter
= "xray(sProperties)"
以X光效果显示对象内容
xray滤镜
属性|方法
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
12、Chroma滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor )
Scripting:object.style.filter =
"progid:DXImageTransform.Microsoft.Chroma ( sProperties ) "
将对象中指定的颜色显示为透明
Chroma 滤镜
属性|方法
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
color
color值
设置或检索此滤镜作用的颜色值。
13、wave滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage ,
freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage ,
strength=iDistance )
Scripting: object
.style. filter = "progid:DXImageTransform.Microsoft.Wave (
sProperties ) "
为对象内容建立波纹扭曲效果
wave滤镜
属性|方法
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
add
布尔值(Boolean)。true | false
true : 滤镜作用图像覆盖原始图像
false :
默认值。只显示滤镜作用图像设置或检索滤镜作用图像是否覆盖原始图像
freq
整数值(Integer)。默认值为 3
设置或检索滤镜建立的波浪数目
lightStrength
整数值(Integer)。取值范围为 0 - 100 。默认值为 100
设置或检索滤镜建立的波浪浪尖和波谷之间的距离
phase
整数值(Integer)。取值范围为 0 - 100 。默认值为 0
设置或检索正弦波开始处的相位偏移
strength
整数值(Integer)。单位为像素
设置或检索以对象为基准的在运动方向上的向外扩散距离
14、Emboss滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage ,
freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage ,
strength=iDistance )
Scripting: object
.style. filter = "progid:DXImageTransform.Microsoft.Wave (
sProperties ) "
为对象内容建立波纹扭曲效果
wave滤镜
属性|方法
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
add
布尔值(Boolean)。true | false
true : 滤镜作用图像覆盖原始图像
false :
默认值。只显示滤镜作用图像设置或检索滤镜作用图像是否覆盖原始图像
freq
整数值(Integer)。默认值为 3
设置或检索滤镜建立的波浪数目
lightStrength
整数值(Integer)。取值范围为 0 - 100 。默认值为 100
设置或检索滤镜建立的波浪浪尖和波谷之间的距离
phase
整数值(Integer)。取值范围为 0 - 100 。默认值为 0
设置或检索正弦波开始处的相位偏移
strength
整数值(Integer)。单位为像素
设置或检索以对象为基准的在运动方向上的向外扩散距离
15、Engrave滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias
)
Scripting:object.style.filter =
"progid:DXImageTransform.Microsoft.Engrave ( sProperties ) "
用灰度值为对象内容制作浮雕纹理效果
Engrave 滤镜
属性|方法
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
Bias
设置或检索添加到滤镜结果的每种颜色组分的值的百分比。大的此属性值产生高亮滤光效果。高对比度的图片受滤镜的影响较小
浮点数(Float)。取值范围为 -1.0 - 1.0 。默认值为 0.7
16、DropShadow滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor ,
offX=iOffsetX , offY=iOffsetY , positive=bPositive )
Scripting:object.style.filter =
"progid:DXImageTransform.Microsoft.DropShadow ( sProperties ) "
DropShadow滤镜
属性
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
function
整数值(Integer) 0-25
设置或检索混合方式
color
color
设置或检索此滤镜作用的颜色值。
offX
整数值(Integer)。单位为像素( px )。默认值为 5
设置或检索阴影在横坐标轴上以对象为基准的偏移量。正值向右偏移,负值向左偏移
offY
整数值(Integer)。单位为像素( px )。默认值为 5
设置或检索阴影在纵坐标轴上以对象为基准的偏移量。正值向下偏移,负值向上偏移
positive
布尔值(Boolean)。true | false
true : 默认值。滤镜从对象的非透明像素建立阴影
false :
滤镜从对象的透明像素建立阴影
17、Shadow滤镜
语法:
CSS:filter :
progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor ,
direction=iOffset , strength=iDistance )
Scripting:
object.style.filter = "progid:DXImageTransform.Microsoft.Shadow ( sProperties )
"
为对象内容建立阴影效果
Shadow滤镜
属性
取值范围
说明
enabled
布尔值(Boolean)。 true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。设置或检索滤镜是否激活。
color
color
设置或检索此滤镜作用的颜色值。
direction
0(上),45(右上)
90(右),135(右下)
180(下),225(左下)
270(左),315(左上)设置或检索滤镜效果的运动偏移方向。
strength
整数值(Integer)。单位为像素
设置或检索以对象为基准的在运动方向上的向外扩散距离。
推荐阅读
-
css滤镜效果 CSSMicrosoft浏览器IE脚本
-
css滤镜效果 CSSMicrosoft浏览器IE脚本
-
IE滤镜与CSS3效果(详细整理分享)
-
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
-
使用CSS3配合IE滤镜实现渐变和投影的效果
-
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
-
IE滤镜与CSS3效果(详细整理分享)
-
postition:fixed 在IE9 无效果,谷歌浏览器有。 什么原因啊?_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
postition:fixed 在IE9 无效果,谷歌浏览器有。 什么原因啊?_html/css_WEB-ITnose