黑白照片 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
我的示范代码:
<div id="bgDiv" style="position:absolutetop:0background-color:#777display:nonefilter: Alpha(Opacity=10, FinishOpacity=50, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200)opacity:0.6left:0z-index:10000"></div>
希望对你有帮助
1、如果想改变css背景图片,一般的做法只能使用css滤镜;2、css滤镜主要包括:
Speia滤镜 灰度图滤镜 高斯模糊滤镜 反色滤镜 饱和度滤镜
对比度滤镜亮度滤镜色相旋转滤镜 阴影滤镜
3、css滤镜在浏览器兼容是比较坑爹的问题,ie浏览器有自己一套滤镜filter家族,基本所有ie内核浏览器都支持,ff和Chrome,opera则主要使用css3的滤镜,这些浏览器在后期版本支持css3的滤镜(目前版本基本都支持html5和css3),通过滤镜改变背景图的颜色和效果,当然这些滤镜主要是为了效果而产生,颜色只是固定的几种效果。
4、个别时候,css滤镜还需要结合js使用,才能到达必要效果,其实一般背景图片都是用透明度的css来设置它的颜色度;
透明度css列子:
transparent_class {
filter:alpha(opacity=50)
-moz-opacity:0.5
-khtml-opacity: 0.5
opacity: 0.5
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {
font-color:red
font:14px "Verdana"
background-color:#3366cc
}
.sizscolor {
position:absolute
padding:4px
filter:
Dropshadow(offx=1,offy=0,color=white)
Dropshadow(offx=0,offy=1,color=white)
Dropshadow(offx=0,offy=-1,color=white)
Dropshadow(offx=-1,offy=0,color=white)
}
.STYLE1 {position: absolutepadding: 4pxfilter: Dropshadow(offx=1,offy=0,color=white) Dropshadow(offx=0,offy=1,color=white) Dropshadow(offx=0,offy=-1,color=white) Dropshadow(offx=-1,offy=0,color=white)color: #FF0000}
</style>
</head>
<body>
<br>
<div class="STYLE1">政策法规</div>
</body>
</html>