CSS：

body {background:#000;}
.container {background:#ccc;}
.row {border:1px solid #fff;}
.col-md-6 {border:1px solid red;} // All of these are as before :)

.background-cover-image {
   background-image: url('http://dummyimage.com/600x500/500/fff');
   background-size: cover;
   background-position: center;
}

这里的秘密是,原始图像仍然存在(其不透明度设置为0),所以它仍然“存在”,并给div一些高度.请不要像我一样使用内嵌样式;将它们移动到CSS类 – 我刚刚为示例做了！

它对我来说很好 – 但是你需要决定什么时候背景图像div(或者你想称之为的任何东西)将自己定位在其他内容之上.

注意在< i>中使用clearfix类.标记,只是为了使下面的内容不会浮动到这个地段.您可能还想在其他div中使用clearfix – 非常有用的类！