CSS:滤镜的使用(图解8)

注意：CSS滤镜只针对于IE浏览器，其他浏览器的浏览效果可能不同。

alpha通道：filter:alpha(opacity=50);

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:20px;
 9 }
10 img{
11     border:1px solid #d58000;
12 }
13 .alpha{
14     filter:alpha(opacity=50);
15 }
16 -->
17 </style>
18    </head>
19 <body>
20 <img src="building1.jpg" border="0">&nbsp;&nbsp;
21 <img src="building1.jpg" border="0" class="alpha">
22 </body>
23 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:20px;
 9 }
10 img{
11     border:1px solid #d58000;
12 }
13 .alpha{
14     filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);
15     /* 从上到下渐变 */
16 }
17 -->
18 </style>
19    </head>
20 <body>
21 <img src="building2.jpg" border="0">&nbsp;&nbsp;
22 <img src="building2.jpg" border="0" class="alpha">
23 </body>
24 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:10px;
 9 }
10 .alpha1{
11     filter:alpha(opacity=100,finishopacity=0,style=2);
12     /* 圆形渐变，中间不透明，四周透明 */
13 }
14 .alpha2{
15     filter:alpha(opacity=0,finishopacity=80,style=2);
16 }
17 -->
18 </style>
19    </head>
20 <body>
21 <center>
22 <img src="building3.jpg"><br><br>
23 <img src="building3.jpg" class="alpha1">
24 <img src="building3.jpg" class="alpha2">
25 </center>
26 </body>
27 </html>

View Code

 1 <html>
 2 <head>
 3 <title>alpha滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     background:url(bg1.jpg);
 8     margin:10px;
 9 }
10 .alpha1{
11     filter:alpha(opacity=100,finishopacity=0,style=3);
12     /* 矩形渐变，中间不透明，四周透明 */
13 }
14 .alpha2{
15     filter:alpha(opacity=0,finishopacity=100,style=3);
16     /* 反之 */
17 }
18 -->
19 </style>
20    </head>
21 <body>
22 <center>
23 <img src="strawberry.jpg">
24 <img src="strawberry.jpg" class="alpha1">
25 <img src="strawberry.jpg" class="alpha2">
26 </center>
27 </body>
28 </html>

blur模糊：类似于高斯模糊

filter:progid:DXImageTransform.Microsoft.blur(pixelradius=10,makeshadow=false);

View Code

 1 <html>
 2 <head>
 3 <title>Blur滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     margin:10px;
 8 }
 9 .blur{
10     filter:progid:DXImageTransform.Microsoft.blur(pixelradius=10,makeshadow=false);
11 }
12 -->
13 </style>
14    </head>
15 <body>
16 <img src="building9.jpg">&nbsp;
17 <img src="building9.jpg" class="blur">
18 </body> 
19 </html>

MotionBlur滤镜：

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);

View Code

 1 <html>
 2 <head>
 3 <title>MotionBlur滤镜</title>
 4 <style>
 5 <!--
 6 body{
 7     margin:10px;
 8 }
 9 .motionblur{
10     filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);        /* 水平向右 */
11 }
12 -->
13 </style>
14    </head>
15 <body>
16 <img src="liuxiang.jpg">&nbsp;&nbsp;
17 <img src="liuxiang.jpg" class="motionblur">
18 </body>
19 </html>