Question

我正在尝试使用Twitter Bootstrap。我处于起步阶段，只想自定义原始的Carousel预定义主题 - http://getbootstrap.com/examples/carousel/我已下载并放入我的本地主机。

我使用Chrome开发者工具来查看是否可以根据我的要求将深色背景更改为更舒适的颜色。如果不使用颜色选择器，我甚至无法找到它的颜色 - ＃777777。这与圆圈中的颜色相同。但是在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，没有任何更改。我试图在.item，.containter，.carousel上更改css项目及其变体的背景。

据我所知，Twitter Bootstrap非常有名，我确信我只是错过了一些非常简单的东西，更高级的用户将能够告诉我正确的方法。对于从初始阶段本身的任何迭代引导，css都是相同的，所以我没有提供任何css（因为它很难显示）。

我四处搜索，发现了一些stackoverflow q＆amp;但是没有帮助我。

Answer 1

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

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

此代码创建了灰色背景。将此更改为无解决问题。

Here's是将rbg颜色转换为base64的好工具

Answer 2

我相信轮播背景的CSS选择器如下：

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

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

Answer 3

本文向您展示如何更改此字符串的5个字符R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw ==以生成您希望用于引导对象的任何颜色： http://micheljansen.org/blog/entry/1238

例如，将字符串更改为data：image / gif; base64，R0lGODlhAQABAPAAAP8AAP /// yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw ==将生成红色对象

无法更改背景轮播颜色

3 个答案: