Question

我的页面上有一个简单的不透明度设置为0.5。问题是，里面的文字也是透明的。我该如何纠正？我是否将另一个div放在透明的顶部？如果是这样，怎么做？

这是我的代码。 “header”div是position：relative。其他是绝对的。不透明度未在IE中显示..

<div id="header">
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
            <div class="transparent" style="background-color:Black; z-index: 0; opacity:0.5; position:absolute;"></div>
            <div class="overlay" style="z-index: 1; position:absolute;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
            <div id="footer">
            </div>
        </div>

Answer 1

你可以实现这种布局的唯一方法是使用两个不同的div，其中第二个不是透明的孩子。

<div id="container">
 <div class="transparent">
 </div>
 <div class="overlay">
 </div>
</div>

您可以将overlay div的z-index属性设置为大于透明div的值，以将其置于“顶部”。

最后一步是将两个相对于容器放置。在容器上使用“position：relative”，在childs上使用“position：absolute”就可以实现这一目标。

Answer 2

透明容器内的任何东西都会“继承”不透明度，因为不透明度会增加。

如果您想要一个带有非透明文本的透明div，一个选项是使用半透明背景图像而不是使用css不透明度。另一种可能性是......刚刚发布的一个消费者。带文字的那个应该没有背景。

Answer 3

不要嵌套DIV，而是将一个放在另一个之上。

如何使用透明的<div>覆盖它的非透明<div>？</div> </div>

3 个答案: