如何在bootstrap中使用css3中的响应式背景图像

Question

我不想使用html标签.这是我的CSS.我正在使用bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

在100%缩放时,这没关系.但是当我放大180%左右时,图像将从顶部和底部变短,我想要一些css技巧.

Answer 1

要获得完整图像背景,请选中:

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;
}

Answer 2

你需要使用 background-size: 100% 100%;

演示

演示2(不会伸展,这就是你在做什么)

说明:您需要100% 100%像XAS WELL AS 一样使用它Y,您100%只是为X参数设置,因此背景不会垂直拉伸.

仍然,图像会伸展,它不会响应,如果你想background按比例拉伸,你可以寻找background-size: cover;但IE会在这里为你制造麻烦,因为它是CSS3属性,但是是的,你可以使用CSS3 Pie作为填充工具.此外,使用cover将裁剪您的图像.

Answer 3

我找到了这个:

充分

Bootstrap 3网站易于使用的完整页面图像背景模板

http://startbootstrap.com/template-overviews/full/

要么

在你的主div容器中使用:

HTML

<div class="container-fluid full">


</div>

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%;
}