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

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

 

1、常见滤镜


1)透明度滤镜

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

            它的表达式如下:

filteralphaopacity=opacityfinishopacity=finishopacitystyle=stylestartX=startXstartY=startYfinishX=finishY

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

例:设置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>

效果:

CSS+DIV网页样式与布局——滤镜_第1张图片


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>

效果:

          CSS+DIV网页样式与布局——滤镜_第2张图片

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>

效果:

        CSS+DIV网页样式与布局——滤镜_第3张图片


(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>

效果:

         


波浪

           语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

           说明:

             Add:一般为1,或0。

             Freq:变形值。

             LightStrength:变形百分比。

             Phase:角度变形百分比。

             Strength:变形强度。

           例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

 

3)其他滤镜

                     

Shadow 滤镜

          语法:{filter:shadow(color=color,direction=direction)} 

          利用“Shadow”属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。 

 

Gray ,Invert,Xray 滤镜

          语法:{filter:gray},{filter:invert},{filter:xray} 

 

          Gray滤镜是把一张图片变成灰度图;(汶川大地震后很多网站色调都变灰色,就是用的这一点代码实现的)

          Invert滤镜是把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值;

          Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,也就是所谓的“X”光片。

 

Glow 滤镜 

           语法:{filter:glow(color=color,strength)} 

           当对一个对象使用'glow'属性后,这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色,STRENGTH”则是强度的表现,可以从1255之间的任何整数来指定这个力度。 

                            

4)更多的滤镜:

          Chroma:把指定的颜色设置为透明 

          DropShadow:建立一种偏移的影象轮廓,即投射阴影 

          Grayscale:降低图片的彩色度 

          Invert:将色彩、饱和度以及亮度值完全反转建立底片效果 

          Light:在一个对象上进行灯光投影 

 

            其实CSS滤镜并不适用于所有的浏览器,很多滤镜效果有一定的兼容性浏览器的限制。但是滤镜的效果是使我们的网页图片达到更多的效果,要想恰到好处的使用滤镜,除了平常的美术功底之外,还需要一定的熟悉和操控能力,甚至要具有很丰富的想象力。这样,才能有的放矢的应用滤镜,发挥出艺术才华。


你可能感兴趣的:(CSS+DIV网页样式与布局——滤镜)