我的背景怎么是透明的？答案

【问题标题】：How come my background is transparent?我的背景怎么是透明的？
【发布时间】：2012-08-02 19:49:07
【问题描述】：

我有 2 个带有容器 div 的 div。我将容器的背景颜色设置为白色，并且没有为其他 2 个 div 设置颜色。由于容器的颜色，期待看到白色背景，但一切都是透明的。正常吗？看起来容器的颜色没有被考虑在内。谢谢http://jsfiddle.net/Grek/svt2s/

CSS

#team-container
{
    width:960px;
    background-color:#FFFFFF;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";
    filter: alpha(opacity=83);
    opacity: 0.83; /* For IE8 and earlier */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

#team-left {
color:#000;
padding-left:20px;
padding-top:20px;
/* padding:15px;*/
width: 30%; 
float: left;
position: relative; 
}

#team-right { 
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
padding-left:25px;
padding-top:28px;
color:#000;
width: 60%; 
float: left;
position: relative; 
text-align:justify;
}

【问题讨论】：

这里有一个提示：（不是完全必要，但它可以帮助人们更快地回答您的问题），如果您将 HTML 和 CSS 粘贴到 jsfiddle.net 的相应位置，您可以向我们展示现场，可编辑，演示您所解释的内容！它对 HTML/CSS/Javascript sn-p 问题非常有用。
不确定我是否理解，将html粘贴到这里。
这里是 jsfiddle 链接：jsfiddle.net/Grek/svt2s
请注意，当为元素设置不透明度时，它将应用于该元素内的所有内容，包括任何子元素。有时这不是我们想要的效果。

标签： css

【解决方案1】：

背景颜色和不透明度不是可继承的属性。如果您没有为任何特定元素/选择器定义它，它将不会被设置。

【讨论】：

【解决方案2】：

父元素必须包含其浮动子元素，否则父元素不会占用布局中的任何空间（出于布局目的，它的高度为 0）。这就是您看不到父级的白色背景的原因。

您可以通过以下两种方式之一来包含浮动的孩子（都完成相同的事情）：

清除修复

.clearfix {...}   /* Insert standard clearfix code here */
...
<div id="team-container class="clearfix">
    <div id="team-left"></div>
    <div id="team-right"></div>
</div>

清除 div

.clear {clear:both;}
...
<div id="team-container">
    <div id="team-left"></div>
    <div id="team-right"></div>
    <div class="clear"></div>
</div>

Modified demo 具有清晰的 div 和浅灰色背景。

Modified demo 带有 clearfix 和浅灰色背景。

【讨论】：