Question

我的包装器div的不透明度设置为0.75。问题是，当我放置另一个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都是透明的，这是一个问题。如何阻止这个？

Answer 1

你无法阻止子节点拥有父级的不透明度，两个解决方法是绝对定位，无论你是否需要它而不是不透明父级的直接子节点，或者很可能你想要不透明度为背景，那么你可以使用RGBA配色方案：

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

0.75是不透明度值。

Answer 2

而不是不透明度，你可以使用rgba作为backgroundcolor。

示例：

#div {
   background: rbga(0, 0, 0, 0.5);
}

Answer 3

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

使包装div位置相对，并且标题div位置绝对，以便它将被解决。 top和left基于相对于包装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>

我希望它有所帮助:)。

包含不透明度的包装器并在此包装器上设置div而不具有不透明度

3 个答案: