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旧版本的工作解决方案。这应该有效（最新版IE的-ms-前缀）：

/*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");

我使用了Gradient过滤器，从相同的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，但我还没有测试过。

Answer 3

只是不要为该div包含背景颜色，它将是透明的。

Answer 4

这是不可能的，不透明度是由子节点继承的，你无法避免这种情况。要仅使父透明，您必须使用元素的定位（绝对）及其z-index

Answer 5

我不知道这是否有所改变。但从我的经验来看。嵌套元素的最大不透明度等于父亲。

意思是：

<div id="a">
<div id="b">
</div></div>

Div#a has 0.6 opacity
div#b has 1 opacity

#b是否在#a之内，那么它的最大不透明度总是为0.6

如果#b的不透明度为0.5。实际上它将是0.6 * 0.5 == 0.3不透明度

Answer 6

.modalBackground
    {

        filter: alpha(opacity=80);
        opacity: 0.8;
        z-index: 10000;
    }

Answer 7

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

将一些图像用于内部图像并使用它。

Answer 8

<div id="divmobile" style="position: fixed; background-color: transparent;
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">

如何使用CSS使背景DIV透明

8 个答案: