Html Bootstrap 4 - <body> 标签的背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45775285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - background image for <body> tag
提问by cdrrr
I'm new to Bootstrap and I'm using Bootstrap Studio to learn how to code.I have added a body background image and set the navbar background to none and that works fine.
我是 Bootstrap 的新手，我正在使用 Bootstrap Studio 来学习如何编码。我添加了一个正文背景图像并将导航栏背景设置为无，这很好用。
I am facing a problem regarding the next components added, in this case a jumbotron and a button. Each one of these two components are going over the image set in the <body>which is logical. What I want is to create a navbar transparent and to have a background image, but only for the jumbotron and the navbar. How can I achieve this?
我在添加下一个组件时遇到了问题，在这种情况下是一个超大屏幕和一个按钮。这两个组件中的每一个都经过<body>逻辑中的图像集。我想要的是创建一个透明的导航栏并具有背景图像，但仅适用于超大屏幕和导航栏。我怎样才能做到这一点？
Thanks and sorry for my english.
感谢和抱歉我的英语。
Here is the HTML code
这是 HTML 代码
<body>
<div>
<div class="jumbotron" id="first-jumbo">
<h1>Heading text</h1>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class="btn btn-default" role="button" href="#">Learn more</a></p>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><a href="#" class="navbar-brand navbar-link">brand </a>
<button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li role="presentation" class="active"><a href="#">first item</a></li>
<li role="presentation"><a href="#">second item</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<button class="btn btn-default" type="button">Button</button>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
Here is the CSS code
这是CSS代码
body {
background:url(../../assets/img/pexels-photo-294560.jpeg) no-repeat;
padding-top:100px;
background-size:cover;
}
.navbar {
background:none;
}
#first-jumbo {
text-align:center;
}
Here is a page preview
这是页面预览
采纳答案by Yuri Ramos
Try this:
尝试这个：
body {
background:url(../../assets/img/pexels-photo-294560.jpeg) no-repeat !important;
padding-top:100px;
background-size:cover;
}
.navbar, #first-jumbo {
background: transparent !important;
}
#first-jumbo {
text-align:center;
}
回答by Sandharu1
I think you want to transparent jumbotron? Use,
我想你想要透明的大屏幕？用，
#first-jumbo {
text-align: center;
background-color: transparent !important;
}
#first-jumbo {
text-align: center;
background-color: transparent !important;
}
