¿Cómo cambiar el color de fondo de jumbrotron?

Quiero saber cómo cambiar el color de fondo de la clase ‘jumbotron’, tiene un valor predeterminado background-color #eee en bootstrap.css.

Traté de anular borrando esto y dando el atributo none,none !important, transparent en mi css personalizado y todavía no funciona.

Intenté inspeccionar el elemento en la ventana del navegador y eliminar la propiedad allí para ver si hubo algún cambio, sigue siendo el mismo problema.

Adoptará cualquier otro color, excepto eliminar el color por completo. La razón por la que pregunto esto es porque tengo una imagen de fondo completa y quiero que jumbotron sea simplemente transparente sin fondo ni 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: usarí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="https://stackoverflow.com/questions/22904102/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 (con 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;*/
}

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>

CSS en línea tiene preferencia sobre las clases definidas en un .css archivo y las clases declaradas dentro <style>

No necesariamente tiene que usar CSS personalizado (o peor aún CSS en línea), en Bootstrap 4 puede usar el clases de utilidad para los coloresme gusta:

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

Y si necesita otros colores además de 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 configurar el texto en blanco en los elementos secundarios dentro del jumbotron, como los encabezados.

Solo elimina la clase full de <html> y añádelo a <body> etiqueta. Luego establece el estilo background-color:transparent !important; para el div Jumbotron (como dijo Amit Joki en su respuesta).

Agregue esto a su archivo css

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

Funcionó para mí.

En el propio archivo HTML, modifique el color de fondo del jumbotron usando el style atributo:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

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

justo y otra clase a jumbotron

bg-transparent

funcionará perfectamente

documentación de color de arranque: https://getbootstrap.com/docs/4.3/utilities/colors/