Html 如何在 bootstrap 中的 css3 中使用响应式背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18612651/
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
How to use responsive background image in css3 in bootstrap
提问by Faizan
I dont want to use html tag. This is my css. I am using bootstrap 3.0.
我不想使用 html 标签。这是我的css。我正在使用引导程序 3.0。
background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;
On 100% zoom this is OK. but when I zoom in at 180% approx, the image will be short from top and bottom, I want some css tricks.
在 100% 缩放时，这没问题。但是当我放大大约 180% 时，图像的顶部和底部会很短，我想要一些 css 技巧。
回答by fiskolin
For full image background, check this:
对于完整的图像背景，请检查：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Mr. Alien
You need to use background-size: 100% 100%;
你需要使用 background-size: 100% 100%;
Demo 2(Won't stretch, this is what you are doing)
演示2（不会拉伸，这就是你在做什么）
Explanation: You need to use 100% 100%as it sets for XAS WELL AS Y, you are setting 100%just for the Xparameter, thus the background doesn't stretch vertically.
说明：您需要使用100% 100%as it set as as Xwell as Y，您100%只是为X参数设置，因此背景不会垂直拉伸。
Still, the image will stretch out, it won't be responsive, if you want to stretch the backgroundproportionately, you can look for background-size: cover;but IE will create trouble for you here as it's CSS3 property, but yes, you can use CSS3 Pie as a polyfill. Also, using coverwill crop your image.
尽管如此，图像会拉伸，它不会响应，如果你想background按比例拉伸，你可以寻找，background-size: cover;但 IE 会在这里为你制造麻烦，因为它是 CSS3 属性，但是是的，你可以使用 CSS3 Pie 作为填充物。此外，使用cover将裁剪您的图像。
回答by raduken
I found this:
我找到了这个：
Full
满的
An easy to use, full page image background template for Bootstrap 3 websites
Bootstrap 3 网站的易于使用的整页图像背景模板
http://startbootstrap.com/template-overviews/full/
http://startbootstrap.com/template-overviews/full/
or
或者
using in your main div container:
在您的主 div 容器中使用：
html
html
<div class="container-fluid full">
</div>
css:
css：
.full {
background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height:100%;
}
回答by Levent Divilioglu
Check this out,
看一下这个，
body {
background-color: black;
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;
}
回答by wkille
The file path 'images/ip-box.png'implies that the css fileis at the same level as the images folder.
文件路径'images/ip-box.png'意味着 css文件与图像文件夹处于同一级别。
It's probably more common to have 'images' and 'css' folders at the same level as the 'index.html' file.
'images' 和 'css' 文件夹与 'index.html' 文件处于同一级别可能更常见。
If that were the case and the css file were one level down in its respective folder, then the path to ip-box.jpgas specified in the css file would be: '../images/ip-box.png'
如果是这种情况，并且 css 文件在其各自文件夹中的下一级，则ip-box.jpgcss 文件中指定的路径将是：'../images/ip-box.png'
回答by pradip kor
Set Responsive and User friendly Background
设置响应式和用户友好的背景
<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
回答by pradip kor
Try this:
尝试这个：
body {
background-image:url(img/background.jpg);
background-repeat: no-repeat;
min-height: 679px;
background-size: cover;
}
