Question

我正在建立一个网站，我有一个浅蓝色的背景，然后我有一个白色透明的矩形。然后在那里，我有一个div，我的实际信息将是这样的，如此布局

<div id = "transparent"> 

<div id = "yourinfo">

<div id = "profileinfo">
    <span id = "yourname"> Name </span>
    <br>
    <span> View </span>

</div>

</div>

</div>

然而，当我尝试在透明矩形上方的主页面上提供背景颜色时，此元素也是透明的，如何删除此透明度并使此元素看起来好像在透明矩形的顶部？

这是我对这些元素的css

div#transparent{
    margin: 40px 40px auto;
    margin-top:0px;
    height: 620px;
    background-color: white;
    opacity:.3;
    padding: 20px;
}

div#yourinfo{
    width: 350px;
    height: 250px;
    background-color: red;
    border: 1px solid gray;
    opacity:1;
    -webkit-border-radius: 15px;
    padding:10px;
}

Answer 1

CSS不透明度适用于子元素。要完成您的工作，您必须在rgba声明中使用background-color（RGB + Alpha /透明度通道）。

如：

#transparent {
    background-color: rgba(255,255,255,0.3)
}

请注意，此方法不适用于IE8＆lt;，因此您可能需要寻找解决方法。要么使用透明.png（就像在过去一样），要么使用一些条件样式表和Microsoft Internet Explorer proprietary syntax。

另外，显然，只有在您不希望#transparent具有半透明文本时，此方法才有效; div中的所有文字都是100％不透明的。因此，您可以在文本颜色上使用相同的CSS3语法。

从上层元素获得透明度

1 个答案: