无法更改背景旋转木马的颜色

Question

我正在用Twitter Bootstrap碰碰运气。我正处于起步阶段，只想自定义最初的旋转木马预定义主题-http://getbootstrap.com/examples/carousel/我已经下载并放入本地主机。

我使用Chrome开发工具来查看是否可以根据我的要求将深色背景更改为更令人愉快的颜色。如果不使用颜色选择器，我甚至找不到它是哪种颜色——#7777777。这与圆圈中的颜色相同。但是css中没有提到这种颜色，因为这种颜色可能是较深的颜色，不透明度设置为显示较浅的颜色。

我可以更改转盘导航的背景渐变，但我一直在努力寻找如何更改背景颜色。

我试着在css中搜索背景，还检查了http://bootstrap-live-customizer.com/(BLC)看看我是否可以自定义它。但这种特殊的颜色不在要自定义的东西列表中。然后我从BLC下载了bootstrap.min.css，但结果是相同的

我使用的是Github docs/examples/carousel 中的默认页面

相关章节

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->

CSS是默认的bootstrap.min.CSS，没有任何更改。我已经尝试更改css项目的背景及其在.item、.contanter、.corrousel.上的变体

据我所知，Twitter Bootstrap非常著名，我相信我只是错过了一些非常简单的东西，更高级的用户将能够向我展示正确的方法。css对于从初始阶段开始的任何bootstrap迭代都是一样的，所以我没有提供任何css(因为它太多了，无法显示)。

我四处寻找，发现了一些stackoverflow q&但对我没有帮助。

Answer 1

当我想将具有相同颜色的圆圈更新为实际图像时，我找到了答案。css无法工作，因为背景是通过src本身生成的。

src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="

这个代码创建了灰色的背景。将其更改为零解决了问题。

这里有一个很好的工具可以将rbg颜色转换为base64

Answer 2

我相信转盘背景的CSS选择器如下：

.carousel .item {
background-color: #777;
}

我不认为默认情况下，背景颜色是在bootstrap.css文件中定义的，但从他们网站上的bootstrap示例来看，这似乎是他们使用的选择器。