如何改变jumbrotron的背景色?

I want to know how to change the background-color of 'jumbotron' class, it has a default background-color #eee in bootstrap.css.

我想知道如何更改“jumbotron”类的背景色，它在bootstrap.css中有一个默认的背景色#eee。

I tried to override by erasing this and giving the attribute none,none !important, transparent into my custom css and still doesn't work.

我试图删除这个属性，并给属性none,none, important，透明到我的自定义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，也不知道如何在其中实现bootstrap。

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(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;*/
}

11 个解决方案

#1

Just remove class full from <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，并将其添加到标记中。然后设置风格背景色:透明!重要;为Jumbotron分区(正如Amit Joki在他的回答中所说)。

#2

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 .css file and the classes declared inside <style>

内联的CSS将优先于在.css文件中定义的类，以及在

#3

Add this to your css file

将它添加到css文件中

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

It worked for me.

它为我工作。

#4

You can also create a custom jumbotron with whatever features/changes you want and apply that class in your html.

您还可以创建一个自定义的jumbotron，其中包含您想要的任何特性/更改，并在html中应用该类。

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

#5

In the HTML file itself, modify the background-color of the jumbotron using the style attribute:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

在HTML文件中，使用style属性修改jumbotron的背景颜色:

。

#6

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中，您可以对颜色使用实用程序类，比如:

<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.

您可能还需要在jumbotron内部的子元素上设置文本-白色，比如标题。

#7

In the .css try

. css的尝试

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

#8

.jumbotron {
background-color:black !important;

}

Add this one line code in .css file, worked for me!

在.css文件中添加这一行代码，为我工作!

#9

I put the jumbotron in a <header> class and added background-color: black !important; to the header class in css.

我将jumbotron放到一个

类中，并添加了背景色:黑色!重要;到css中的header类。

#10

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;
   }

#11

As said in another stack overflow answers, is not recommended to use !important.

如在另一个堆栈溢出的答案中所说，不建议使用!重要。

In boostrap, id's have greater priority than classes and classes have greater priory than elements.

在boostrap中，id比类优先级更高，类比元素优先级更高。

The best solution is add an arbitrary id to any root element of your page, like

最好的解决方案是向页面的任何根元素添加任意id，比如

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

and then select the element or class using that id.

然后使用该id选择元素或类。

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

#1