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 回答