css背景颜色设置为半透明,关于css设置背景色透明，半透明

代码是

filter: Alpha(Opacity=50)

background-color: rgba(0, 0, 0, 0.5);

这种设置层里面所有的东西都透明了。

其实说到半透明，相信绝大部分同仁应该都知道的一种很常用的方法，即css3的opacity结合ie

alpha滤镜即可。比如：

.translucent{

background:#000;

opacity:

0.5;

filter:

progid:DXImageTransform.Microsoft.alpha(opacity=50);

}

上面这个样式类即为一个背景色为黑色，元素半透明的样式类。这也是目前半透明遮罩层最常用的方法，(ps:有个小地方需要注意，在ie6下需要触发它的haslayout或包裹性才有效，不过一般不存在问题，因为一般这种半透明遮罩的元素都是绝对定位的，overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了，以后会单独再出一篇关于包裹性的文)

恩，正如各位看官所见，打开的层的确半透明了，不过半透明的好彻底，以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的，我只要背景色透明就好了..所以这个方法并没有满足这个需求。

于是，针对只要背景色透明的东东，应该有另一种办法，就是css3的rgba属性结合ie的gradient滤镜

.bg-translucent{

background:rgba(0,0,0,0.5);

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

}

这个稍微复杂一点

在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。具体语法如下：

{filter:

alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具体参数含义如下：

opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style 指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。

以上的参数可以选用，可以只设置一个opacity

例如：

{filter:alpha(opacity=50)}

这个就是半透明的设置，只要把{}中的代码加入到需要设置的模版中的{}的即可，记得与前面的代码之间要用";"间隔，不然设置是无效的

例如：

我要设置模版区域背景的颜色(白色)+半透明[就是我现在blog的效果]

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都设置background-color:white

这些就是模版背景设置的ID

然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个

中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

如果希望像我这样只显示blog的背景，别的都全透明的话，那么就在别的模版中加入背景全透明的代码即可

background:transparent 这就是背景全透明的代码

不过这样的话，相关模版的主要区域是透明了，可是底下还会有一条颜色留着的，所以另外还要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代码，这样才能让模版区域完全透明，就像我现在的效果一样

另外这个参数目前只能用于背景色的设置，背景图片无法设置为半透明