CSS：如果在DIV上使用不透明度，内部的一切都更轻

Question

我有这样的结构：

<div class="abc">
  <ul>
    <li>something</li>
    ...
  </ul>
</div>

我需要在abc div上应用不透明度选项。如果我这样做，它会起作用，但<ul>内的文字具有不透明度abc DIV =＆gt; <ul>中的文字较轻。

有没有办法在DIV（它的背景）上应用opacity，而不是在DIV内的内容上？{/ p>

谢谢

Answer 1

如果没有将div拉出div，我能想到的唯一方法是使用rgba使背景颜色部分透明（如果它是纯色）：

background-color:rgba(0,0,0,.5);

这会使背景变为黑色，不透明度为50％，但只适用于较新的浏览器。

jsFiddle：http://jsfiddle.net/jdwire/XzeGE/

为了支持旧浏览器，您可以将一个微小的png base64编码到css中（或者仅引用一个外部图像）。有关详细信息，请参阅http://en.wikipedia.org/wiki/Data_URI_scheme，有关在css或html中嵌入base64编码图像的缺点，请参阅https://stackoverflow.com/a/5258101/1721527。

如果背景是图像，只需将其设为部分透明的png。

Answer 2

如果背景是一种颜色，您可以使用rgba背景颜色，如下所示：

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

这将产生50％不透明度的黑色背景，而不会影响子元素的不透明度。

请注意，这不适用于旧版IE（我认为6＆amp; 7）。

Answer 3

你需要一个单独的div与内容，并在不透明度div上设置它的位置，如下所示：

<div class="container">
    <div class="opacity"></div>
    <div class="content"></div>
</div>

<强> CSS

.container{
    position:relative;
}
.opacity{
    //desired opacity here
}
.content{
    position:absolute;
    top:0;
    left:0;
}

rgba和其他答案一样，如果我们在这里讨论背景色，那么这也是一个很好的方法。

Answer 4

尝试使用RGBA

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

此处，最后一个值表示0到1级的透明度

Answer 5

如果您计划拥有背景图片，请仅使用此选项。指定颜色的alpha值。

http://jsfiddle.net/jU8MT/

<div class="abc">
    <div class="bgd"></div>
  <ul class="def">
    <li>something</li>
  </ul>
</div>


.abc {
    width: 200px;
    height: 200px;
    position: relative;
}
.bgd {
    background: red;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.def {
    z-index: 1;
}

Answer 6

您是否尝试将不透明度应用于内部元素？类似的东西：

div { 
    opacity: ....
}

div ul {
    opacity: .....
}

Answer 7

在我做与Internet Explorer有关的任何事情之前，我首先将html 5垫片称为我的标题

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

<!--The fav and touch icons -->

现在在你的CSS文件中，

div.abc ul { background-color: #333; }

div.abc ul li{background-color: #333;}

我认为这就是你要找的东西？