it-swarm.com.de

Wie kann man die Hintergrundfarbe von Jumbotron ändern?

Ich möchte wissen, wie man die Hintergrundfarbe der 'Jumbotron'-Klasse ändert, sie hat einen Standardwert background-color #eee in bootstrap.css. 

Ich habe versucht, es zu überschreiben, indem ich das löschte und das Attribut none, none !important, transparent in meine benutzerdefinierte css eingebe. 

Ich habe versucht, das Element im Browserfenster zu untersuchen und die Eigenschaft dort zu entfernen, um zu sehen, ob Änderungen vorgenommen wurden. Es ist immer noch das gleiche Problem.

Es wird jede andere Farbe annehmen, außer dass die Farbe vollständig entfernt wird. Der Grund, warum ich dies frage, ist, dass ich ein vollständiges Hintergrundbild habe und möchte, dass Jumbotron einfach transparent ist, ohne Hintergrund oder Farbe. Es sei denn, 

Mir fehlt etwas aus der BootStrap 3.1.1 Dokumentation, in der ich auch dort nachgesehen habe.

HINWEIS: Ich würde jsfiddle.net verwenden, um Sie leicht zu zeigen, aber es unterstützt nicht 3.1.1 und ist nicht sicher, wie Bootstrap darin implementiert wird.

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

Entfernen Sie einfach die Klasse full aus <html> und fügen Sie sie dem <body>-Tag hinzu. Dann legen Sie den Stil background-color:transparent !important; für das Jumbotron-Div fest (wie Amit Joki in seiner Antwort sagte).

14
shin

Versuche dies:

<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 erhält Vorrang vor Klassen, die in einer .css-Datei definiert sind, und den in <style> definierten Klassen

24
Amit Joki

Fügen Sie dies Ihrer CSS-Datei hinzu

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

Es hat für mich funktioniert.

4
David

Sie müssen nicht unbedingt benutzerdefiniertes CSS (oder sogar noch schlimmeres Inline-CSS) verwenden. In Bootstrap 4 können Sie die Utility-Klassen für colors verwenden, z.

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

Wenn Sie andere Farben als die Standardfarben benötigen, fügen Sie einfach weitere bg-Klassen hinzu, die dieselbe Namenskonvention verwenden. Dies hält den Code sauber und verständlich.

Möglicherweise müssen Sie auch untergeordnete Elemente innerhalb des Jumbotron wie Überschriften textweiß einstellen.

3

Sie können auch ein benutzerdefiniertes Jumbotron mit beliebigen Funktionen/Änderungen erstellen und diese Klasse in Ihrer HTML-Klasse anwenden.

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

gerecht und eine weitere Klasse für Jumbotron

bg-transparent

Es wird perfekt funktionieren

bootstrap-Farbdokumentation: https://getbootstrap.com/docs/4.3/utilities/colors/

1

Ändern Sie in der HTML-Datei selbst die Hintergrundfarbe des Jumbotron mithilfe des Attributs style:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

1
Debopriyo Basu

In der .css versuchen

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

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

}

Fügen Sie diesen einen Zeilencode in der .css-Datei hinzu, der für mich funktioniert hat!

0
Karan Motwani

Wie in anderen Stack-Überlaufantworten gesagt, wird die Verwendung von! Wichtig nicht empfohlen. 

In boostrap haben IDs eine höhere Priorität als Klassen und Klassen haben Vorrang vor Elementen. 

Die beste Lösung ist, jedem Wurzelelement Ihrer Seite eine beliebige ID hinzuzufügen, wie z

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

und wählen Sie dann das Element oder die Klasse mit dieser ID aus.

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

Ich habe das Jumbotron in eine <header>-Klasse eingefügt und background-color: black !important; zur Header-Klasse in css hinzugefügt.

0
Levi Johnson

Sie können Folgendes verwenden, um die Hintergrundfarbe eines Jumbotron zu ändern:

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

Internen Stil hinzuzufügen ist nicht gut für SEO und Performance. Ich füge dem Div eine ID hinzu, z. id = "jumbocustom" und stylen Sie es

#jumbocustom
   {
 background:red;
   }
0
jonah