我想知道如何改变＆＃39; jumbotron＆＃39;的背景颜色。 class，它在bootstrap.css中有一个默认的background-color #eee。
我尝试通过删除此内容并将属性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;*/
}
答案 0 :(得分：24)
试试这个：
<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>中声明的类
答案 1 :(得分：14)
只需从full移除课程<html>，然后将其添加到<body>标记即可。然后为Jumbotron div设置样式background-color:transparent !important;（正如Amit Joki在他的回答中所说）。
答案 2 :(得分：5)
你不一定要使用自定义CSS（甚至更糟的内联CSS），在Bootstrap 4中你可以使用utility classes for colors，如：
<div class="jumbotron bg-dark text-white">
...
如果您需要其他颜色而不是默认颜色，只需使用相同的命名约定添加其他bg类。这使代码保持整洁和易懂。
你可能还需要在jumbotron中的子元素上设置text-white，就像标题一样。
答案 3 :(得分：4)
将此添加到您的css文件
1001Intro. to CompSci 4ALBERT, PETER A. Comp Info System A
1001Intro. to CompSci 4ALLENSON, SHEILA M. Comp Info System B
1001Intro. to CompSci 4ANDERSON, ALENE T. Comp Info System A
1001Intro. to CompSci 4HENDRIX, JAMES D. Lib Arts - MIS C
1001Intro. to CompSci 4CANNON, FREDDY B.B. Comp Info System B
1002Visual Basic 3ALBERT, PETER A. Comp Info System C
1002Visual Basic 3ALLENSON, SHEILA M. Comp Info System D
1002Visual Basic 3ANDERSON, ALENE T. Comp Info System A
1002Visual Basic 3HENDRIX, JAMES D. Lib Arts - MIS B
1002Visual Basic 3CANNON, FREDDY B.B. Comp Info System B
1003Cisco Networking I 4ALBERT, PETER A. Comp Info System C
1003Cisco Networking I 4ALLENSON, SHEILA M. Comp Info System A
1003Cisco Networking I 4ANDERSON, ALENE T. Comp Info System A
1003Cisco Networking I 4HENDRIX, JAMES D. Lib Arts - MIS D
1004Cisco Networking III3ALBERT, PETER A. Comp Info System B
1004Cisco Networking III3ALLENSON, SHEILA M. Comp Info System C
1004Cisco Networking III3ANDERSON, ALENE T. Comp Info System A
1004Cisco Networking III3CANNON, FREDDY B.B. Comp Info System B
1004Cisco Networking III3HELLER, HELEN H. Lib Arts - MIS A
1004Cisco Networking III3HENDRIX, JAMES D. Lib Arts - MIS F它对我有用。
答案 4 :(得分：2)
您还可以使用您想要的任何功能/更改创建自定义jumbotron，并在您的HTML中应用该类。
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}
答案 5 :(得分：2)
最简单的方法，用于更改超大屏幕的背景颜色
如果您想更改巨型波谱仪的背景色，则可以使用自定义类之一为其应用背景色。
HTML代码：
<div class="jumbotron myclass">
<h1>My Heading</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
CSS代码：
<style>
.myclass{
background-color: red;
}
</style>
答案 6 :(得分：1)
在HTML文件本身中，使用style属性修改jumbotron的背景颜色：
<div class="jumbotron" style="background-color:#CFD8DC;"></div>
答案 7 :(得分：0)
在.css中尝试
.jumbotron {
background-color:red !important;
}
答案 8 :(得分：0)
.jumbotron {
background-color:black !important;
}
在.css文件中添加这一行代码，为我工作！
答案 9 :(得分：0)
我将jumbotron放在<header>类中，并将background-color: black !important;添加到css的标题类中。
答案 10 :(得分：0)
添加内部风格对SEO和性能不利。我在div中添加了一个id，例如ID =＆＃34; jumbocustom＆＃34;并设计风格
#jumbocustom
{
background:red;
}
答案 11 :(得分：0)
在boostrap中，id比类具有更高的优先级，并且类具有比元素更大的priory。
最佳解决方案是向页面的任何根元素添加任意ID，例如
<body id="my-body">
<!-- your html code -->
</body>
然后使用该ID选择元素或类。
#my-body .jumbotron{
/*Your css elements and values here.*/
}
答案 12 :(得分：0)
您可以使用以下方法更改超大屏幕的背景颜色：
<div class="container">
<div class="jumbotron text-white" style="background-color: #8c6278;">
<h1>Coffee lover project !</h1>
</div>
</div>
答案 13 :(得分：0)
答案 14 :(得分：0)
我认为另一种实现方法是使用嵌入式CSS，只需在html代码中添加背景颜色
<div class="jumbotron" style="background-color:blue;">
<h3>Piece of text</h3>
</div>