您的位置：首页 > Web前端 > CSS

我的css滤镜学习日记

2008-10-20 14:36 253 查看

一.Alpha

<img src="080270.jpg" width="281" height="175" style="FILTER: Alpha(Opacity=30,Finishopacity=50,style=1,StartX=10,StartY=20,EndX=100,EndY=200) "/>

说明:alpha 设置透明度 Opactity:透明度范围0-100, style:渐变效果 1 是线型,2是放射性,3是长方型 Finishopacity:渐变的大小.

StartX,StartY:渐变开始的座标   EndX,EndY渐变结束的座标

二.Blur

<img src="080270.jpg" width="281" height="175" style="FILTER:blur(add=true,direction=90,strength=30)"/>

blur:模糊   add: 为ture 或false direction :模糊方向每45度为一个方向默认的是270度 strength 多少像素将被模糊整数

三.dropshadow 阴影

color:颜色 offx x偏移量 offy y偏移量 positive true或false 只可以在td里面有效

四.

filter:flipv 垂真翻转

fliph 水平翻转

五 Glow

glow:发光 color颜色 ,strength:发光强度     只可以在td里面有效

六shadow投影

color颜色   direction 角度

dropshadow是偏移量投影    shadow是角度投影只在td里面有效

七.wave

产中波纹效果

add:true 或flase 是否产生婆纹效果   freq:产生多少条波纹效果   lightStrength:波纹的发光强度 strength：波纹的振幅大小

八 filter:light

addAmbient (iRed,iGreen,iBlue,iStrength) : 为滤镜添加环境光。环境光是无方向的，并且均匀的洒在页面的表面。环境光有颜色和强度值，可以为对象田家更多的颜色。它通常和其他光一起使用。无返回值。参数见下表。
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。
iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为 0 - 100 。

changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改变光的颜色。无返回值。参数见下表。
iLightNumber : 必选项。整数值(Integer)。指定光的标识符。
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。
fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>

<body>

   <img style="filter:light(); width:400; height:300" id="mypic" src="aa.bmp" onload="javascript:this.filters.light.addAmbient(10,250,100,55)" onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,0)" />
   <img style="filter:light(); width:400; height:300" id="mypic" src="aa.bmp" onload="javascript:this.filters.light.addAmbient(10,250,100,55)" onmousemove="javascript:this.filters.light.changeColor(1,150,100,50,0)" /><br/>
   <img style="filter:light(); width:400; height:300" id="mypic" src="aa.bmp" onload="javascript:this.filters.light.addAmbient(10,250,100,55)" onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,1)" />

   <img style="filter:light(); width:400; height:300" id="mypic" src="aa.bmp" onload="javascript:this.filters.light.addAmbient(10,250,100,55)" onmousemove="javascript:this.filters.light.changeColor(1,150,100,50,1)" /><br/>

</body>
</html>

flttgt.filters[0].addcone(0,0,5,100,100,225,225,0,60,15);
   flttgt.filters[0].addcone(400,170,5,100,100,225,0,0,160,15);

<td width="344" id="flttgt" style="FILTER: light(enabled=1);width=300"><div align="center">滤镜效果：<br>
        <img src="eg.jpg" width="200" height="208" ></div></td>

如果把10设成5则是

九filter:invert　

Invert滤镜: 把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；
格式：
{filter:invert}

十.filter:xRay Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮变成黑白色

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css integer javascript filter html div

相关文章推荐

新的分享

章节导航