CSS 响应式 Bootstrap Jumbotron 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22000754/
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
Responsive Bootstrap Jumbotron Background Image
提问by Nick B
I'm using bootstrap jumbotron, and including a background image. Resizing the screen makes the image tile and repeat, whereas I want the image to be responsively resized.
我正在使用引导程序 jumbotron，并包括背景图像。调整屏幕大小会使图像平铺并重复，而我希望响应地调整图像大小。
<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
<div class="container for-about">
<h1>About</h1>
</div>
</div>
How would you go about making the image responsive? The site is HERE. Thanks for your ideas!
您将如何使图像具有响应性？该网站在这里。谢谢你的想法！
回答by Steve
The simplest way is to set the background size to "cover"
最简单的方法是将背景大小设置为“覆盖”
.jumbotron {
background-image: url("../img/jumbotron_bg.jpg");
background-size: cover;
}
Steve
史蒂夫
回答by Fadils
This is what I did.
First, just override the jumbotron class, and do the following:
这就是我所做的。
首先，只需覆盖 jumbotron 类，然后执行以下操作：
.jumbotron{
background: url("bg.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
So, now you have a jumbotron with responsive background in place. However, as Irvin Zhan already answered, the height of the background still not showing correctly.
所以，现在你有一个带有响应式背景的超大屏幕。但是，正如Irvin Zhan已经回答的那样，背景的高度仍然没有正确显示。
One thing you can do is fill your div with some spaces such as this:
您可以做的一件事是用一些空格填充您的 div，例如：
<div class="jumbotron">
<div class="container">
About
<br><br><br> <!--keep filling br until the height is to your liking-->
</div>
</div>
Or, more elegantly, you can set the height of the container. You might want to add another class so that you don't override Bootstrap container class.
或者，更优雅地，您可以设置容器的高度。您可能想要添加另一个类，以便您不会覆盖 Bootstrap 容器类。
<div class="jumbotron">
<div class="container push-spaces">
About
</div>
</div>
.push-spaces
{
height: 100px;
}
回答by Justin
I found that this worked perfectly for me:
我发现这对我来说非常有效：
.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}
You can resize your screen and it will always take up 100% of the window.
您可以调整屏幕大小，它始终会占据窗口的 100%。
回答by JustRocca
This is how I do :
这就是我的做法：
<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<h1>Hello</h1>
</div>回答by Joan
You could try this:
你可以试试这个：
Simply place the code in a style tag in the head of the html file
只需将代码放在 html 文件头部的 style 标签中
<style>
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}
</style>or put it in a separate css file as shown below
或者把它放在一个单独的 css 文件中，如下所示
.jumbotron {
background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
}use center centerto center the image horizontally and vertically. use coverto make the image fill out the jumbotron space and finally no-repeatso that the image is not repeated.
使用center center将图像水平和垂直居中。使用cover使图像填满jumbotron空间，最后no-repeat，使图像不重复。
回答by maxshuty
TLDR:Use background-size: 100% 100%;.
TLDR：使用background-size: 100% 100%;.
background-size: cover;may cut off some parts of the image producing poor results.
background-size: cover;可能会切断图像的某些部分，从而产生较差的效果。
Using background-size: 100% 100%;you force the image to take up 100%of the parent element for both heightand width.
使用background-size: 100% 100%;你强制图片占用100%两个父元素的height和width。
See W3Schoolsfor more information on this.
有关这方面的更多信息，请参阅W3Schools。
Here is a working, responsive jumbotronbackground image:
这是一个有效的响应式jumbotron背景图片：
<div class="jumbotron" style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
<h1>Welcome</h1>
<p class="lead">Your message here</p>
<p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
回答by Irvin Zhan
Unfortunately, there is no way to make the div height respond to the background-size. Easiest solution that I have used is adding an img tag within your jumbotron that contains that background image.
不幸的是，没有办法让div 高度响应 background-size。我使用过的最简单的解决方案是在包含该背景图像的超大屏幕中添加一个 img 标签。
回答by Dhanesh Agrawal
The below code works for all the screens :
以下代码适用于所有屏幕：
.jumbotron {
background: url('backgroundimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
The cover property will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
cover 属性将调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或切掉一个边缘。
