为什么我设置.carousel .item为黑色整个网页都变成黑色的了？
<style>
body{
padding-top: 50px;
}
.carousel{
height: 500px;
background-color: :#000;
}
.carousel .item{
height: 500px;
background-color: #000;
}
.carousel img{
height: 500px;
width: 100%;
}
</style>
<div id="carousel-example-generic" class="carousel slide" >
<!--小点点导航-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!--轮播组件的内容-->
<div class="carousel-innner">
<div class="item active">
<img src="img/chrome-big.jpg"/>
<div class="carousel-caption">
<h1>chrome</h1>
<p>chrome,又称谷歌浏览器。Chrome 可将您在计算机上打开的标签页、保存的书签和最近搜索过的内容同步到手机或平板电脑上，反之亦然。这意味着您可将自己在 Chrome 中的内容和设置同步到所有的设备上。只需登录您的其他设备即可开始同步。</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点我下载</a></p>
</div>
</div>
<div class="item">
<img />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img />
<div class="carousel-caption">
</div>
</div>
</div>
<!--轮播组件向左向右的按钮-->
<a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" ></span>
<span class="sr-only">上一页</span>
</a>
<a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" ></span>
<span class="sr-only">下一页</span>
</a>
</div>
