0

我正在制作一个网站，我有一个浅蓝色的背景，然后我有一个白色的透明矩形。然后在那里我有一个 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;
}
4

1 回答 1

0

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

如：

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

请注意，这种方法不适用于 IE8<，因此您可能需要寻找解决方法。要么使用透明的.png（就像过去一样），要么使用一些条件样式表和Microsoft Internet Explorer 专有语法。

此外，显然，这种方法仅在您不想#transparent使用半透明文本时才有效；所有文本都将 100% 不透明div。因此，您可以对文本颜色使用相同的 CSS3 语法。

于 2013-08-03T15:48:52.897 回答