Как изменить цвет фона jumbrotron?
Я хочу знать, как изменить цвет фона класса экран, он имеет значение по умолчанию background-color #eee
в bootstrap.стиль CSS.
Я попытался переопределить, удалив это и дав атрибут none
,none !important
, transparent
в мой пользовательский css и все еще не работает.
Я попытался проверить элемент в окне браузера и удалить свойство там, чтобы увидеть, есть ли какие-либо изменения, это все та же проблема.
он примет любой другой цвет, за исключением удаление цвета. Причина, по которой я спрашиваю об этом, заключается в том, что у меня есть полное фоновое изображение и я хочу, чтобы jumbotron был просто прозрачным без фона или цвета. Если
мне не хватает чего-то из документации BootStrap 3.1.1, в которой я проверил там.
примечание: Я бы использовал jsfiddle.net чтобы легко показать вам, но он не поддерживает 3.1.1 и не уверен, как реализовать bootstrap в он.
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;*/
}
12 ответов
просто удалить класс full
с <html>
и добавить его в <body>
тег. Затем задать стиль background-color:transparent !important;
для Jumbotron div (как сказал Амит Йоки в своем ответе).
попробуйте это:
<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>
добавьте это в файл css
.jumbotron {
background-color:transparent !important;
}
это сработало для меня.
вы также можете создать пользовательский jumbotron с любыми функциями / изменениями, которые вы хотите, и применить этот класс в своем html.
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}
в самом HTML-файле измените цвет фона jumbotron, используя :<div class="jumbotron" style="background-color:#CFD8DC;"></div>
вам не обязательно использовать пользовательский CSS (или еще хуже встроенный CSS), в Bootstrap 4 вы можете использовать служебные классы для цветов, например:
<div class="jumbotron bg-dark text-white">
...
и если вам нужны другие цвета, чем по умолчанию, просто добавьте дополнительные BG-классы, используя то же соглашение об именах. Это держит код аккуратным и понятным.
вам также может потребоваться установить text-white на дочерние элементы внутри jumbotron, например заголовки.
.jumbotron {
background-color:black !important;
}
добавьте этот код одной строки .css-файл, работал на меня!
Я поставил jumbotron в <header>
класс и добавил background-color: black !important;
к классу заголовка в CSS.
добавление внутреннего стиля не подходит для SEO и производительности. Я добавляю идентификатор в div, например id= "jumbocustom" и стиль его
#jumbocustom
{
background:red;
}
Как сказано в другом стеке переполнения ответов, не рекомендуется использовать !важный.
в boostrap id имеют больший приоритет, чем классы, а классы имеют больший priory, чем элементы.
лучшим решением является добавление произвольного идентификатора в любой корневой элемент вашей страницы, например
<body id="my-body">
<!-- your html code -->
</body>
а затем выберите элемент или класс, используя этот идентификатор.
#my-body .jumbotron{
/*Your css elements and values here.*/
}
вы можете использовать следующее, чтобы изменить цвет фона Jumbotron:
<div class="container">
<div class="jumbotron text-white" style="background-color: #8c6278;">
<h1>Coffee lover project !</h1>
</div>
</div>