Bootstrap全宽有2个不同的背景（和2列） [英] Bootstrap full-width with 2 different backgrounds (and 2 columns)

问题描述

这有点难以解释，这就是为什么我也无法在Google上找到答案。

我使用Bootstrap 3，我需要全宽背景图像。在那2个透明的彩色背景的顶部。我做了一个示例图片，使它清楚：

1 +2：组合透明色背景

$ b

3 + 4：组合透明色背景

+4：组合的背景图片（最低层）

有人知道这是否可能，以及如何？感谢您的帮助！

解决方案

是的，使用 问题 ，但将其扩展到列

Codepen演示（下面）显示的结果比堆栈片段更好，其中包含了参考。

data-lang =jsdata-hide =falsedata-console =false>

  * {margin：0; padding：0; box-sizing：border-box;} body {overflow：hidden; / *防止滚动条* /}。container {width：80％; margin：auto; margin-top：1em;位置：相对; overflow：visible;}。extra：before {content：'';显示：block; / * override bootstrap * / position：absolute; top：0;左：50％; width：100vw;高度：100％; transform：translate（-50％，0）; background-image：url（http://lorempixel.com/output/sports-q-c-640-480-7.jpg）; background-size：50％; background-position：center;} [class * =col] {border：2px solid gray; min-height：320px; position：relative;}。left：before {content：''; position：absolute;高度：100％; width：100vw; top：0; right：0; background：rgba（255，0，0，0.5）}。right：before {content：''; position：absolute;高度：100％; width：100vw; top：0; left：0; background：rgba（0，0，255，0.25）;}  

 < div class =container extra> < div class =row> < div class =col-sm-4 left>< / div> < div class =col-sm-8 right>< / div> < / div>< / div>  

Codepen演示

It's a little bit hard to explain, that's why i also can't find the answer on Google.

I'm working with Bootstrap 3, and i need a full width background image. On top of that 2 transparent color backgrounds. I made a example image to make it all clear:

1+2: combined transparent color background

3+4: combined transparent color background

1+2+3+4: combined background image (lowest layer)

Does anyone know if this is possible and how? Thanks for your help!

解决方案

Yes, using the techniques outlined in this question but extending it to the columns.

The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* prevent scrollbar */
}
.container {
  width:80%;
  margin:auto;
  margin-top: 1em;
  
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  /* override bootstrap */
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
  background-image: url(http://lorempixel.com/output/sports-q-c-640-480-7.jpg);
  background-size: 50%;
  background-position: center;
}
[class*="col"] {
  border: 2px solid grey;
  min-height: 320px;
  position: relative;
}
.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5)
}
.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

Codepen Demo

这篇关于Bootstrap全宽有2个不同的背景（和2列）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！