如何改变jumbrotron的背景颜色？ [英] How to change the background-color of jumbrotron?
问题描述
我想知道如何改变'jumbotron'类的背景颜色，它在bootstrap.css中有一个默认的 background-color #eee 。
I want to know how to change the background-color of 'jumbotron' class, it has a default background-color #eee in bootstrap.css.
我试图通过擦除并赋予属性 none ， ，透明到我的自定义css仍然不工作。
I tried to override by erasing this and giving the attribute none,none !important, transparent into my custom css and still doesn't work.
我尝试检查浏览器窗口中的元素，并删除那里的属性，看看是否有任何更改，仍然是同样的问题。
I tried inspecting the element in the browser window and removing the property there to see if there was any change, it's still the same problem.
它将采用任何其他颜色，除了完全删除颜色。我问这个的原因是因为我有一个完整的背景图像，并希望jumbotron简单的透明，没有背景或颜色。除非，
It will adopt any other color, except removing the color entirely. The reason I'm asking this is because I have a full background image and want jumbotron to simply transparent with no background or color to it. Unless,
我从BootStrap 3.1.1文档中遗漏了一些我在那里检查过的东西。
I'm missing something from the BootStrap 3.1.1 documentation in which I checked there as well.
注意：我会使用jsfiddle.net轻松地显示你，但它不支持3.1.1，不知道如何实现引导。
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）
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;*/
}
推荐答案
只需从< html> 中删除类 full code>< body> 标记。然后为Jumbotron div设置样式 background-color：transparent！important; （如Amit Joki在他的答案中所述）。
Just remove class full from <html> and add it to <body> tag. Then set style background-color:transparent !important; for the Jumbotron div (as Amit Joki said in his answer).
这篇关于如何改变jumbrotron的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
