html - fondo - darle color a jumbotron
¿Cómo cambiar el color de fondo del jumbrotron? (11)
Quiero saber cómo cambiar el color de fondo de la clase ''jumbotron'', tiene un background-color #eee predeterminado background-color #eee en bootstrap.css.
Traté de anularlo borrando esto y dando el atributo none , none !important , transparent en mi css personalizado y todavía no funciona.
Traté de inspeccionar el elemento en la ventana del navegador y quitar la propiedad allí para ver si había algún cambio, sigue siendo el mismo problema.
Adoptará cualquier otro color, excepto eliminar completamente el color. La razón por la que estoy preguntando esto es porque tengo una imagen de fondo completa y quiero que el jumbotron simplemente transparente, sin fondo o color. A no ser que,
Me falta algo de la documentación de BootStrap 3.1.1 en la que también verifiqué allí.
NOTA: Utilizaría jsfiddle.net para mostrarle fácilmente, pero no es compatible con 3.1.1 y no estoy seguro de cómo implementar bootstrap en él.
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;*/
}
Agregar estilo interno no es bueno para SEO y rendimiento. Agregué una identificación al div eg eg = "jumbocustom" y lo puse
#jumbocustom
{
background:red;
}
Agregue esto a su archivo css
.jumbotron {
background-color:transparent !important;
}
Funcionó para mí
Como se dijo en otras respuestas de desbordamiento de pila, no se recomienda su uso! Importante.
En boostrap, los identificadores tienen mayor prioridad que las clases y las clases tienen mayor prioridad que los elementos.
La mejor solución es agregar una ID arbitraria a cualquier elemento raíz de su página, como
<body id="my-body">
<!-- your html code -->
</body>
y luego selecciona el elemento o clase usando esa identificación.
#my-body .jumbotron{
/*Your css elements and values here.*/
}
En el archivo HTML en sí, modifique el color de fondo del jumbotron con el atributo de style :
<div class="jumbotron" style="background-color:#CFD8DC;"></div>
En el intento de .css
.jumbotron {
background-color:red !important;
}
No necesariamente tiene que usar CSS personalizado (o incluso peor CSS en línea), en Bootstrap 4 puede usar las clases de utilidad para colores , como:
<div class="jumbotron bg-dark text-white">
...
Y si necesita otros colores distintos a los predeterminados, simplemente agregue clases bg adicionales usando la misma convención de nomenclatura. Esto mantiene el código limpio y comprensible.
Es posible que también deba establecer texto blanco en elementos secundarios dentro del jumbotron, como los títulos.
Prueba esto:
<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>
El CSS en línea obtiene preferencia sobre las clases definidas en un archivo .css y las clases declaradas dentro de <style>
Puse el jumbotron en una clase <header> y agregué background-color: black !important; a la clase de encabezado en css.
Simplemente elimine la clase full de <html> y agréguela a la etiqueta <body> . A continuación, establezca style background-color:transparent !important; para el div de Jumbotron (como dijo Amit Joki en su respuesta).
También puede crear un jumbotron personalizado con las características / cambios que desee y aplicar esa clase en su html.
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}
.jumbotron {
background-color:black !important;
}
¡Agregue este código de una línea en el archivo .css, funcionó para mí!