twitter-bootstrap CSS 背景图像裁剪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21067875/
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
CSS Background image crop
提问by BorHunter
I'm try to use big background image in my site, but when I insert it on the page it's cropped from the top and bottom, may anybody help me? Also I'm use twitter bootstrap.
我试图在我的网站中使用大背景图片，但是当我将它插入页面时，它是从顶部和底部裁剪的，有人可以帮助我吗？我也在使用推特引导程序。
<div id="page1" class="row">
<div class="col-md-12" id="bg">
</div>
</div>
body {
width: 100%;
min-height: 100%;
}
#page1, #page2, #page3, #page4, #page5, #page6, #page7, #page8 {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-right: 1px solid black;
}
#page1 {
background: url('Images/Background/1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 1000px;
}
回答by Muster
Do you want that the background-image isn't cropped?
您希望背景图像不被裁剪吗？
Then use background-size: contain;instead of background-size: cover;.
然后使用background-size: contain;代替background-size: cover;。
With background-size: 100% 100%;your image will be expended (if it is important that the full page have a background).
随着background-size: 100% 100%;你的形象会被消耗（如果它是重要的是，整个页面有一个背景）。
When IE8 and older is important for you, then you have to use a polyfill. For more information: http://caniuse.com/#search=background-size
当 IE8 及更早版本对您很重要时，您必须使用 polyfill。更多信息：http: //caniuse.com/#search=background-size
Keep in mind, that on small screens, your image will be to big and cost time to load and resize. You can use CSS3 Media Queries (http://caniuse.com/#search=media%20queries) to prevent this problem.
请记住，在小屏幕上，您的图像会很大并且需要花费时间来加载和调整大小。您可以使用 CSS3 媒体查询 ( http://caniuse.com/#search=media%20queries) 来防止此问题。
回答by Nicholas Hazel
Based on the information I see, and if you want it to indefinitely scale to the size of the page, you can use css3. Change this:
根据我看到的信息，如果您希望它无限地缩放到页面的大小，您可以使用css3. 改变这个：
background-size: cover;
background-size: cover;
to...
到...
background-size: 100% 100%;
background-size: 100% 100%;
Alternatively, you could just position: absolute;a div with a lower z-indexthan your page. For Example...
或者，您可以只是position: absolute;一个低于z-index您的页面的 div 。例如...
