Невозможно изменить фон Цвет карусели

Question

Я стараюсь удачи в Twitter Bootstrap. Я нахожусь на начальных этапах и просто хочу настроить оригинальную заданную тему карусели - http://getbootstrap.com/examples/carousel/, которую я загрузил и разместил в своем локальном хосте.

Я использовал инструменты разработчика Chrome, чтобы увидеть, могу ли я изменить темный фон на более приятный цвет согласно моему требованию. Я даже не мог найти, какой цвет он использовал, не используя набор цветов - # 777777. Это тот же цвет, что и в кругах. Но этот цвет нигде не упоминается в css, поскольку, возможно, цвет является более темным, с прозрачностью, чтобы показать более светлый цвет.

Мне удалось изменить угол канюли навигации, но я изо всех сил пытался найти, как изменить цвет фона.

Я попытался найти фон в css, а также проверил http://bootstrap-live-customizer.com/ (BLC), чтобы узнать, могу ли я его настроить. Но этот конкретный цвет нигде в списке вещей для настройки. Затем я скачал bootstrap.min.css из BLC, но результаты такие же

Я использую страницу по умолчанию, доступные в Github Docs/примеры/каруселью

Соответствующий раздел

<!-- 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, .containter, .carousel.

Как я понимаю, Twitter Bootstrap очень известен, я уверен, что я просто пропустил что-то очень простое, и более продвинутые пользователи смогут показать мне правильный способ сделать это. Css будет одинаковым для любой итерации бутстрапа с самого начального этапа, поэтому я не предоставил никакого css (поскольку его слишком много, чтобы показать).

Я искал вокруг и нашел несколько stackoverflow q & a, но не помог мне.

Answer 1

Я нашел ответ, когда захотел обновить свои круги, которые имели один и тот же цвет в реальных изображениях. Css не работал, потому что фон был создан через сам src.

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

Этот код создал серый цвет фона. Изменение этого ни к чему не привело.

Answer 2

Я считаю, что селектор CSS для фона карусельного является следующее:

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

Я не думаю, что по умолчанию, цвет фона определяется в файле bootstrap.css, но глядя на примерах Bootstrap с их веб-сайта, это, по-видимому, селектор, который они используют.

Answer 3

В этой статье показано, как можно изменить 5 символов этой строки R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw == производить любой цвет вы хотели бы для объектов начальной загрузки: http://micheljansen.org/blog/entry/1238

Например, изменяя строку данных: изображения/GIF; base64, R0lGODlhAQABAPAAAP8AAP /// yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw == будет производить красный объект