4

我有这样的结构：

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

我需要在abcdiv 上应用一个不透明度选项。如果我这样做，它会起作用，但是里面的文本<ul>不透明，因为abcDIV => 里面的文本<ul>更轻。

有什么方法可以应用于opacityDIV（其背景），但不能应用于 DIV 内的内容？

谢谢

4

7 回答 7

6

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

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

这将使背景为黑色，不透明度为 50%，但仅适用于较新的浏览器。

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

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

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

于 2013-03-01T14:37:09.813 回答
2

如果背景是一种颜色，您可以使用这样的rgba背景颜色：

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

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

请注意，这不适用于旧版本的 IE（我认为是 6 和 7）。

于 2013-03-01T14:35:45.323 回答
2

您需要一个包含内容的单独 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就像其他答案一样，如果我们在这里谈论背景颜色，这也是一个好方法。

于 2013-03-01T14:36:51.357 回答
1

仅当您计划有背景图像时才使用它。指定颜色的 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;
}

在此处输入图像描述

于 2013-03-01T14:39:42.670 回答
1

改用 RGBA

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

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

于 2013-03-01T14:37:48.440 回答
0

在我做任何与 Internet Explorer 相关的事情之前，我首先将 html 5 shim 调用到我的标题中

<!-- 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;}

我想这就是你要找的东西？

于 2013-03-03T16:14:24.870 回答
0

您是否尝试将不透明度应用于内部元素？就像是：

div { 
    opacity: ....
}

div ul {
    opacity: .....
}
于 2013-03-01T14:39:11.907 回答