css 用滤镜设置背景为透明色

html-css020

css 用滤镜设置背景为透明色,第1张

刚好,我曾经做过这个功能,和你分享下。

黑白照片 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>