it-swarm.com.ru

Как изменить цвет фона jumbotron?

Я хочу знать, как изменить цвет фона класса 'jumbotron', он имеет значение по умолчанию background-color #eee в bootstrap.css. 

Я попытался переопределить, стерев это и передав атрибут none, none !important, transparent в мой пользовательский css, и все еще не работает. 

Я попытался проверить элемент в окне браузера и удалить его свойство, чтобы увидеть, есть ли какие-либо изменения, это все та же проблема.

Он примет любой другой цвет, кроме полного удаления цвета. Я спрашиваю об этом потому, что у меня есть полное фоновое изображение и я хочу, чтобы jumbotron был просто прозрачным без фона или цвета. Если, 

Я что-то упускаю из документации BootStrap 3.1.1, в которой я тоже проверял.

ПРИМЕЧАНИЕ: я бы использовал jsfiddle.net, чтобы легко показать вам, но он не поддерживает 3.1.1 и не уверен, как внедрить в него загрузчик.

HTML

<title>Full Page Image Background Template for Bootstrap 3</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom CSS for the 'Full' Template -->
<link href="css/full.css" rel="stylesheet">

<!--Displays the Navigation Bar Style-->
<div class="navbar navbar-default navbar-fixed-top">
    <!--Displays the Navigation Bar Content-->
    <div class="navbar-header">
        <!-- displays the icon bar in responsive view; when clicked reveals a list-->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <!-- displays the icon bars in responsive view;-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!--Brand, Logo of your website-->
        <a class="navbar-brand" href="#">Virtual Productionz, Inc.</a>
    </div>

    <!-- Allows collapse/show navbar in responsive view-->
    <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <!-- Dropdown menu-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Integrated Laser Keyboard</a></li>
              <li><a href="#">More...</a></li>
            </ul>
          </li>
          <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>


<div class="jumbotron">
    <h1>Welcome!</h1>
    <p>We're an awesome company that creates virtual things for portable devices.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>


<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>

CSS(w/bootstrap.css)

@import url("bootstrap.min.css");
@import url("bootstrap-theme.css");

body {
margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
}

.full {
 /*background: url(http://placehold.it/1920x1080) no-repeat center center fixed;*/
 background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.jumbotron{
color: #FFFFFF;
/*background-color:none !important;*/
}
31
TheAmazingKnight

Просто удалите класс full из <html> и добавьте его в тег <body>. Затем установите стиль background-color:transparent !important; для элемента Jumbotron (как сказал Амит Джоки в своем ответе).

14
shin

Попробуй это:

<div style="background:transparent !important" class="jumbotron">
    <h1>Welcome!</h1>
    <p>We're an awesome company that creates virtual things for portable devices.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

Встроенный CSS получает преимущество над классами, определенными в файле .css, и классами, объявленными внутри <style>

24
Amit Joki

Добавьте это в ваш файл CSS

.jumbotron {
    background-color:transparent !important; 
}

Это сработало для меня.

4
David

Вам не обязательно использовать пользовательский CSS (или, что еще хуже, встроенный CSS), в Bootstrap 4 вы можете использовать служебные классы для цветов , например:

<div class="jumbotron bg-dark text-white">
...

И если вам нужны другие цвета, чем цвета по умолчанию, просто добавьте дополнительные bg-классы, используя то же соглашение об именах. Это делает код аккуратным и понятным.

Вам также может понадобиться установить текстовый белый цвет для дочерних элементов внутри jumbotron, например, заголовков.

3
Andreas Bergström

Вы также можете создать пользовательский jumbotron с любыми нужными функциями/изменениями и применить этот класс в своем html.

.jumbotronTransp {
   padding: 30px;
   margin-bottom: 30px;
   font-size: 21px;
   font-weight: 200;
   line-height: 2.1428571435;
   color: inherit;
   background-color: transparent;
}
2
Quent

В самом файле HTML измените цвет фона jumbotron с помощью атрибута style:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

1
Debopriyo Basu

В .css попробуй

.jumbotron {
    background-color:red !important; 
}

0
Rob Jones
.jumbotron {
background-color:black !important; 

}

Добавить этот однострочный код в файл .css, работал для меня!

0
Karan Motwani

Как сказано в другом стеке переполнения ответов, не рекомендуется использовать! Важно. 

В boostrap идентификаторы имеют больший приоритет, чем классы, а классы имеют больший приоритет, чем элементы. 

Лучшее решение - добавить произвольный идентификатор к любому корневому элементу вашей страницы, например

<body id="my-body">
    <!-- your html code --> 
</body>

а затем выберите элемент или класс, используя этот идентификатор.

#my-body .jumbotron{
    /*Your css elements and values here.*/
}
0
Leonardo

Я поместил jumbotron в класс <header> и добавил background-color: black !important; в класс заголовка в css.

0
Levi Johnson

Вы можете использовать следующее, чтобы изменить цвет фона Jumbotron:

<div class="container">
    <div class="jumbotron text-white" style="background-color: #8c6278;">
        <h1>Coffee lover project !</h1>
    </div>
</div>
0
Mahdi Ghelichi

Добавление внутреннего стиля не хорошо для SEO и производительности. Я добавляю идентификатор в div, например id = "jumbocustom" и стиль его

#jumbocustom
   {
 background:red;
   }
0
jonah