div+css (8)

 

                                                 CSS的滤镜使用方法

一、概述

1、alpha通道

样式表

body{

       background:url(bg1.jpg);

       margin:20px;

}

img{

       border:1px solid #d58000;

}

.alpha{

       filter:alpha(opacity=50);

}

 

引用

<img src="building1.jpg" border="0" class="alpha">

这里滤镜实现了图片的透明，使背景图映在图片里。这里透明对为50%。

 

       2、blur模糊

       使图片变模糊

       .blur{

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

}

 

3、透明色chorma

.chroma{

       filter:chroma(color=FF6800);              /* 去掉金黄色 */

}

 

4、flip翻转

body{

       margin:12px;

       background:#000000;

}

.flip1{

       filter:fliph;       /* 水平翻转 */

}

.flip2{

       filter:flipv;       /* 竖直翻转 */

}

.flip3{

       filter:flipv fliph;      /* 水平、竖直同时翻转 */

}

5、遮罩

body{

       margin:12px;

       background:#000000;

}

.mask{

       filter:mask(color=#8888FF); /* 遮罩效果 */

}

将图片静态的部分颜色全部替换为新的一种颜色，动态部分为原来的背景色，仍保持着动态效果。

      

       6、波浪

       文字的波浪

       span.wave3{  

       filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);

}

 

图片制作水面倒影

.three{

filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);

       /* 同时使用三个滤镜 */

       /* 竖直翻转、透明、波浪效果 */

}