0

我有不透明度设置为 0.75 的包装器 div。问题是当我放置另一个 div 时它也是透明的。

这是HTML：

<div id="header_wrapper">
     <div id="header">
         <div class="logo"></div>               
         <ul class="hor_list" id="main_menu">
            <li><a href="#">Home</a></li>
         </ul>
     </div>
</div>

CSS：

#header_wrapper {           
    background: black;
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */         
    height: 82px;
    margin-bottom: 60px;
}

在这种情况下div.logo，ul#main_menu两者都是透明的，这是一个问题。如何阻止这种情况？

4

3 回答 3

1

您不能阻止子节点具有父节点的不透明度，两种解决方法是绝对定位以将其放置在您需要的任何位置，而不是不透明度父节点的直接子节点，或者，您很可能希望背景不透明度，然后您可以使用RGBA 配色方案：

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

0.75 是不透明度值。

于 2013-10-14T06:31:34.083 回答
1

您可以使用 rgba 作为背景色，而不是不透明度。

例子：

#div {
   background: rbga(0, 0, 0, 0.5);
}
于 2013-10-14T06:31:59.823 回答
0

如果一个 div 设置为不透明度，则 div 内的所有内容都将具有不透明度，除了简单的事情之外，没有办法改变这种行为。

使包装器 div 位置相对，而标题 div 位置绝对，这样就可以解决。顶部和左侧基于相对于包装器 div 的标题 div 位置

<div id="header_wrapper" style="position:relative">
     <div id="header" style="postition:absolute; top:10px;left:10px">
         <div class="logo"></div>               
         <ul class="hor_list" id="main_menu">
            <li><a href="#">Home</a></li>
         </ul>
     </div>
</div>

我希望它有帮助:)

于 2013-10-14T06:34:19.817 回答