如何使用CSS使背景DIV透明

Question

我正在使用CSS attrubutes:

filter: alpha(opacity=90);    

不透明度:.9;

使DIV透明,但是当我在这个DIV中添加另一个DIV时,它也会变得透明.

我想让外(背景)DIV只透明.怎么样 ？

Answer 1

小提琴:http://jsfiddle.net/uenrX/1/

内部DIV无法撤消外部DIV的不透明度属性.如果要实现透明度,请使用rgba或hsla:

外部div:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

内部div:

background-color: #FFF; /* Background white, to override the background propery*/

编辑
因为你已经添加filter:alpha(opacity=90)到你的问题,我认为你也想要一个工作的解决方案(旧版本的IE).这应该工作(-ms-IE的最新版本的前缀):

/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

我已经使用了渐变滤镜,开始与同start-和end-color,使背景不显示梯度,但平坦的颜色.颜色格式采用ARGB十六进制格式.我编写了一个JavaScript代码段来将相对不透明度值转换为绝对的alpha-hex值:

var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);

Answer 2

我有同样的问题,这是我提出的解决方案,这更容易!

制作一个1px x 1px的透明图像并将其另存为.png文件.

在DIV的CSS中,使用以下代码:

background:transparent url('/images/trans-bg.png') repeat center top;

请记住将文件路径更改为透明图像.

我认为这个解决方案适用于所有浏览器,可能除了IE 6,但我还没有测试过.