css的滤镜效果

来源:互联网 发布:网络舆情 编辑:程序博客网 时间:2024/05/17 07:25
第一种:加入带有颜色的遮罩一样的半透明效果。
源代码为:
<STYLE type=text/css>
.bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',startColorstr=#AAFFFFFF, endColorstr=#AAFFFFFF);}
</STYLE>
代码中:startColorstr=#AAFFFFFF 前面的AA是透明度,修改成FF是不透明,00是全透明,后面的 FFFFFF 是颜色,就是说在上面蒙什么颜色的东西,正常使用这个效果startColorstr=#AAFFFFFF和 endColorstr=#AAFFFFFF 后面的=#AAFFFFFF数值要一样!

2.简易透明效果。
将上面的渲染方式改为:filter:alpha(opacity=80),80是透明值,100为不透明,0为全透明。

3.其实CSS还有很多其他的渲染方式~付上其他的一些渲染代码。
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2
0 0
原创粉丝点击