Comment changer la couleur de fond de jumbrotron?

je veux savoir comment changer la couleur d'arrière-plan de "jumbotron" classe, il a une valeur par défaut background-color #eee dans le bootstrap.CSS.

j'ai essayé de passer outre en effaçant ceci et en donnant l'attribut none,none !important,transparent dans mon css personnalisé et ne fonctionne toujours pas.

j'ai essayé d'inspecter l'élément dans la fenêtre du navigateur et d'enlever la propriété pour voir s'il y avait un changement, c'est toujours le même problème.

il adopte toute autre couleur, sauf enlever la couleur entièrement. La raison pour laquelle je demande cela est parce que j'ai une image d'arrière-plan complète et que je veux jumbotron tout simplement transparent sans arrière-plan ou de couleur à elle. À moins que,

je manque quelque chose de la documentation de BootStrap 3.1.1 dans laquelle j'ai vérifié là aussi.

NOTE: I would use jsfiddle.net pour vous montrer facilement, mais il ne supporte pas 3.1.1 et ne sait pas comment implémenter bootstrap dans il.

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