CSS+DIV网页样式与布局——滤镜

浏览数：32 / 时间：2015年06月09日

滤镜主要是用来实现图像的各种特殊效果。它在PhotoShop中有非常神奇的作用。CSS滤镜的标识符是“filter”，总体上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜可以直接作用于对象上，并且立即生效的滤镜成为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则成为高级滤镜。

1、常见滤镜

（1）透明度滤镜

Alpha通道：用于设定透明度。

它的表达式如下：

filter：alpha（opacity=opacity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishY）

其中opacity表示透明度登记，可选值1-100,0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。

例：设置50%的透明度

<style>
	.alpha{
		filter:alpha(opacity=50,style=2,startX=500,startY=20,finishX=530,finishY=50);
	}
</style>
<body>
	<img src="pikaqiu1.jpg" border="0">  
	<img src="pikaqiu1.jpg" border="0" class="alpha">
</body>

效果：

技术分享

Blur滤镜：用户设定模糊度

表达式：blur(pixelradius=4,makeshadow=false)其中pixelradius设置模糊的程度。

例：设置模糊效果

<style>
	.blur{
		filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
	}
</style>
<body>
	<img src="pikaqiu2.jpg"> 
	<img src="pikaqiu2.jpg" class="blur">
</body>

效果：

技术分享

chroma滤镜：

使用”Chroma‘属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。

语法：{filter:chroma(color=color)}

例：对老虎身上的金黄色过滤

<style>
	.chroma{
		filter:chroma(color=FF6800);		/* 去掉金黄色 */
	}
</style>
<body>
	 <img src="tiger.gif">  
	<img src="tiger.gif" class="chroma">
</body>

效果：

mask滤镜：

语法：{filter:mask(color=color)}

使用‘MASK‘属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。

例：

<style>
	.mask{
		filter:mask(color=#8888FF);	/* 遮罩效果 */
	}
</style>
<body>
	<img src="muma.gif"> 
	<img src="muma.gif" class="mask">
</body>

效果：

技术分享

(2)形状

翻转

Flip：语法：STYLE="filter:fliphflipv"其中fliph代表水平翻转 flipv代表竖直翻转

例：做一个中心对称的水平竖直翻转的效果图。

<style>
	.flip1{
		filter:fliph;	/* 水平翻转 */
	}
	.flip2{
		filter:flipv;	/* 竖直翻转 */
	}
	.flip3{
		filter:flipv fliph;	/* 水平、竖直同时翻转 */
	}
	</style>
<body>
	<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
	<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>

效果：