Html 如何更改 jumbrotron 的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22904102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the background-color of jumbrotron?
提问by TheAmazingKnight
I want to know how to change the background-color of 'jumbotron' class, it has a default background-color #eeein bootstrap.css.
我想知道如何更改“jumbotron”类的背景颜色，它background-color #eee在 bootstrap.css 中有一个默认值。
I tried to override by erasing this and giving the attribute none,none !important, transparentinto my custom css and still doesn't work.
我试图重写通过删除这一点，并给出了属性none，none !important，transparent为我的自定义CSS和仍然无法正常工作。
I tried inspecting the element in the browser window and removing the property there to see if there was any change, it's still the same problem.
我尝试检查浏览器窗口中的元素并删除那里的属性以查看是否有任何更改，它仍然是相同的问题。
It will adopt any other color, except removing the color entirely. The reason I'm asking this is because I have a full background image and want jumbotron to simply transparent with no background or color to it. Unless,
它将采用任何其他颜色，除了完全去除颜色。我问这个的原因是因为我有一个完整的背景图像，并希望 jumbotron 简单透明，没有背景或颜色。除非，
I'm missing something from the BootStrap 3.1.1 documentation in which I checked there as well.
我在 BootStrap 3.1.1 文档中遗漏了一些我也在那里检查过的东西。
NOTE: I would use jsfiddle.net to easily show you, but it doesn't support 3.1.1 and not sure how to implement bootstrap into it.
注意：我会使用 jsfiddle.net 来轻松地向您展示，但它不支持 3.1.1 并且不确定如何在其中实施引导程序。
HTML
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)
CSS（带 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;*/
}
采纳答案by shin
Just remove class fullfrom <html>and add it to <body>tag. Then set style background-color:transparent !important;for the Jumbotron div (as Amit Joki said in his answer).
只需full从中删除类<html>并将其添加到<body>标签即可。然后background-color:transparent !important;为 Jumbotron div设置样式（正如 Amit Joki 在他的回答中所说）。
回答by Amit Joki
Try this:
尝试这个：
<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>
Inline CSS gets preference over classes defined in a .cssfile and the classes declared inside <style>
内联 CSS 优先于.css文件中定义的类和内部声明的类<style>
回答by Andreas Bergstr?m
You don't necessarily have to use custom CSS (or even worse inline CSS), in Bootstrap 4 you can use the utility classes for colors, like:
您不一定必须使用自定义 CSS（甚至更糟的内联 CSS），在 Bootstrap 4 中，您可以使用用于 colours的实用程序类，例如：
<div class="jumbotron bg-dark text-white">
...
And if you need other colors than the default ones, just add additional bg-classes using the same naming convention. This keeps the code neat and understandable.
如果您需要默认颜色以外的其他颜色，只需使用相同的命名约定添加额外的 bg 类。这使代码保持整洁和易于理解。
You might also need to set text-white on child-elements inside the jumbotron, like headings.
您可能还需要在超大屏幕内的子元素上设置 text-white，例如标题。
回答by David
Add this to your css file
将此添加到您的 css 文件中
.jumbotron {
background-color:transparent !important;
}
It worked for me.
它对我有用。
回答by Quent
You can also create a custom jumbotron with whatever features/changes you want and apply that class in your html.
您还可以使用您想要的任何功能/更改创建自定义超大屏幕，并在您的 html 中应用该类。
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}
回答by Debopriyo Basu
In the HTML file itself, modify the background-color of the jumbotron using the styleattribute:<div class="jumbotron" style="background-color:#CFD8DC;"></div>
在 HTML 文件本身中，使用以下style属性修改超大屏幕的背景颜色：<div class="jumbotron" style="background-color:#CFD8DC;"></div>
回答by Dimitriy Bakhanenko
just and another class to jumbotron
只是和另一个班级大屏幕
bg-transparent
It will work perfectly
它会完美地工作
bootstrap color documentation: https://getbootstrap.com/docs/4.3/utilities/colors/
引导程序颜色文档：https: //getbootstrap.com/docs/4.3/utilities/colors/
回答by Harpreet Singh
The easiest wayto change the background color of the jumbotron
在最简单的方法来改变的超大屏幕的背景颜色
If you want to change the background color of your jumbotron, then for that you can apply a background color to it using one of your custom class.
如果您想更改超大屏幕的背景颜色，那么您可以使用自定义类之一为其应用背景颜色。
HTML Code:
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 Code:
CSS 代码：
<style>
.myclass{
background-color: red;
}
</style>
回答by jonah
Adding internal style is not good for SEO and Performance. I add an id to the div e.g. id="jumbocustom" and style it
添加内部样式对 SEO 和性能不利。我向 div 添加一个 id，例如 id="jumbocustom" 并设置它的样式
#jumbocustom
{
background:red;
}
回答by Mahdi Ghelichi
You can use the following to change the background-color of a Jumbotron:
您可以使用以下内容更改 Jumbotron 的背景颜色：
<div class="container">
<div class="jumbotron text-white" style="background-color: #8c6278;">
<h1>Coffee lover project !</h1>
</div>
</div>
