Ik wil weten hoe ik de achtergrondkleur van de ‘jumbotron’-klasse kan wijzigen, deze heeft een standaard background-color #eeein bootstrap.css.
Ik heb geprobeerd dit op te heffen door dit te wissen en het attribuut none,none !important, transparentin mijn aangepaste css te geven en doet dat nog steeds’ ik werk.
Ik heb geprobeerd het element in het browservenster te inspecteren en de eigenschap daar te verwijderen om te zien of er enige verandering was, het is nog steeds hetzelfde probleem.
Het zal elke andere kleur aannemen, behalve de kleur volledig verwijderen. De reden dat ik dit vraag is omdat ik een volledige achtergrondafbeelding heb en wil dat jumbotron gewoon transparant is zonder achtergrond of kleur. Tenzij,
Ik mis iets in de BootStrap 3.1.1-documentatie waarin ik het ook heb gecontroleerd.
OPMERKING: ik zou jsfiddle.net gebruiken om het je gemakkelijk te laten zien, maar het ondersteunt 3.1.1 niet en ik weet niet zeker hoe je bootstrap erin implementeert.
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(met 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(https://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;*/
}
Antwoord 1, autoriteit 100%
Verwijder gewoon klasse fulluit <html>en voeg deze toe aan de tag <body>. Stel vervolgens de stijl background-color:transparent !important;in voor de Jumbotron-div (zoals Amit Joki zei in zijn antwoord).
Antwoord 2, autoriteit 97%
Probeer dit:
<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 krijgt de voorkeur boven klassen die zijn gedefinieerd in een .css-bestand en de klassen die zijn gedeclareerd in <style>
Antwoord 3, autoriteit 99%
Je hoeft niet per se aangepaste CSS te gebruiken (of erger nog inline CSS), in Bootstrap 4 kun je de utiliteitsklassen voor kleuren, zoals:
<div class="jumbotron bg-dark text-white">
...
En als u andere kleuren nodig hebt dan de standaardpunten, voegt u gewoon extra BG-klassen toe met behulp van hetzelfde naamgevingsverdrag. Dit houdt de code netjes en begrijpelijk.
Misschien moet u ook tekstwit instellen op kinderelementen in de Jumbotron, zoals kopjes.
Antwoord 4, Autoriteit 43%
Voeg dit toe aan uw CSS-bestand
.jumbotron {
background-color:transparent !important;
}
het werkte voor mij.
Antwoord 5, Autoriteit 14%
Wijzig in het HTML-bestand zelf de achtergrondkleur van het jumbotron met behulp van de styleattribuut:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>
Antwoord 6, Autoriteit 10%
U kunt ook een aangepaste jumbotron maken met welke functies / wijzigingen u wilt en die klasse in uw HTML toepassen.
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}
Antwoord 7, Autoriteit 10%
ENKELE EN NOG EEN KLASSE AAN JUMBOTRON
bg-transparent
Het werkt perfect
Documentatie van bootstrap Kleur: https://getbootstrap.com/docs/4.3/Utils/ Kleuren /
Antwoord 8, Autoriteit 10%
De gemakkelijkste manier om de achtergrondkleur van de jumbotron
te wijzigen
Als u de achtergrondkleur van uw jumbotron wilt wijzigen, kunt u daarvoor een achtergrondkleur toepassen met een van uw aangepaste klassen.
HTML-code:
<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:
<style>
.myclass{
background-color: red;
}
</style>
Antwoord 9, autoriteit 5%
U kunt het volgende gebruiken om de achtergrondkleur van een Jumbotron te wijzigen:
<div class="container">
<div class="jumbotron text-white" style="background-color: #8c6278;">
<h1>Coffee lover project !</h1>
</div>
</div>
Antwoord 10
Probeer in de .css
.jumbotron {
background-color:red !important;
}Antwoord 11
.jumbotron {
background-color:black !important;
}
Voeg deze code van één regel toe aan het .css-bestand, werkte voor mij!
Antwoord 12
Ik plaatste de jumbotron in een <header>-klasse en voegde background-color: black !important;toe aan de header-klasse in css.
Antwoord 13
Het toevoegen van een interne stijl is niet goed voor SEO en prestaties. Ik voeg een id toe aan de div, b.v. id=”jumbocustom” en stijl het
#jumbocustom
{
background:red;
}
Antwoord 14
Ik denk dat een andere manier om dit te doen is om in-line css te gebruiken, voeg gewoon je achtergrondkleur toe aan de html-code
<div class="jumbotron" style="background-color:blue;">
<h3>Piece of text</h3>
</div>