[06/22][教 程] CSS 濾 鏡

月儿

Alpha滤镜：设置透明度 opacity：透明度。默认的范围是从0 到 100，0代表完全透明，100代表完全不透明。 style ：指定透明区域的形状。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Alpha(Opacity=100,Style=3)"> Blru滤镜:模糊效果 ADD参数：TRUE（默认）或者FALSE。它指定图片是否被改变成印象派的模糊效果。 模糊效果是按顺时针的方向进行的，DIRECTIO”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。 STRENGTH值使用整数来指定，代表有多少像素的宽度将受到模糊影响。默认是5个。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:blur(add=ture,direction=135,strength=10)"> Chroma滤镜:把指定的颜色设置为透明 设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:chroma(color=white)"> DropShadow滤镜：建立一种偏移的影象轮廓，即投射阴影 Color代表投射阴影的颜色， offx和offy分别是X方向和Y方向阴影的偏移量.Positive参数是一个布尔值，如果为"TRUE(非0)"，那么就为任何的非透明像素建立可见的投影。如果为"FASLE(0)"，那么就为透明的像素部分建立透明效果。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < DIV style="FILTER: dropshadow(color=gray, offx=10, offy=10, positive=10);FONT-SIZE: 50pt; WIDTH: 400px">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div> FlipH滤镜;FlipV滤镜:水平反转;垂直反转 图片分别是水平反转和垂直反转。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:fliph;"><br>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:flipv;"><br>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="fliph()flipv()"> Glow滤镜:为对象的外边界增加光效 COLOR指定发光的颜色. STRENGTH是强度，从1到255之间任何整数。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < DIV style="FILTER: glow(color=black,strength=20); WIDTH: 100%;">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div> Gray滤镜:把一张图片变成灰度图 降低图片的彩色度 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Gray"> Invert滤镜:胶片底片 将色彩、饱和度以及亮度值完全反转. 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Invert"> Xray滤镜:X光片 让对象反映出它的轮廓并把这些轮廓加亮. 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Xray"> Mask滤镜:为一个对象建立透明膜 color值为膜的颜色 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:mask(color=red)"> Shadow滤镜:建立一个对象的固体轮廓，即阴影效果 COLOR是投影色， DIRECTION是设置投影的方向。0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < DIV style="FILTER: shadow(color=blue,direction=225);FONT-SIZE: 50pt; WIDTH: 400px">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div> Wave滤镜:在X轴和Y轴方向利用正弦波纹打乱图片 wave属性把对象按垂直的波形样式打乱,默认是"TRUE(非0)" ADD表示是否要把对象按照波形样式打乱 FREQ是波纹的频率，即指定在对象上一共需要产生多少个完整的波纹 LIGHTSTRENGTH参数可以对于波纹增强光影的效果，范围0----100 PHASE参数用来设置正弦波的偏移量 STRENGTH代表振幅大小 原图 使用滤镜后的图 < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> < img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)" width="375" height="300">

[ 本帖最后由 月儿 于 2006-6-22 16:12 编辑 ]

happy-yan

这个很好 学习中 谢谢分享

绯舞

谢谢月儿的好教程 好好学习 中

爱你是我的错

这个是要好好学习呀~谢谢了

桑桑

找了很久了。。。谢了先。。。。。。。。

月儿

::~~~ 那 男 生 帥 嗎 ?
他 可 是 月 儿 的 大 哥 !!
假 如 被 他 發 現 那 我 必 會 死 得 很 難 看 ….15()ol

绯舞

月儿的大哥哦 好帅 嘘。。我们保密

小辣椒

月儿的大哥啊...粉帅也~ 哈哈,有点像谢庭峰的说呢~