html - 带有不透明度的包装器并在没有不透明度的情况下在此包装器上设置 div

标签 html css

<分区>

我有一个不透明度设置为 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.logoul#main_menu 都是透明的,这是一个问题。如何阻止这种情况?

最佳答案

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

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

0.75 是不透明度值。

关于html - 带有不透明度的包装器并在没有不透明度的情况下在此包装器上设置 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19354571/

上一篇:css - 无法摆脱 Firefox 中的垂直下拉菜单填充

下一篇:jquery - Firefox 和 IE 8 中的对齐问题

相关文章:

html - 内部错误(1267, "Illegal mix of collations (greek_general_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation ' 像'")

jquery - 过渡不适用于悬停

html - 下拉菜单 CSS 未显示 li :hover/a:hover -- No JavaScript

javascript - 将鼠标悬停在文本上以显示 ul 元素

css - 如何固定靠近事件窗口右边界的div位置

javascript - 使用 JS 将多选添加到筛选列表

javascript - 将 DOM 中的一个表附加到另一个表。没有可用的类或 ID 的定位

html - 与位置 : relative 堆叠

html - css冲突扩展宽度

javascript - Mozilla/chrome/JQuery 可拖动图像不在鼠标位置