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

问题描述

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

我正在使用 Bootstrap 3，我需要全宽背景图像.在这 2 个透明颜色背景之上.我制作了一个示例图片来说明一切:

1+2:组合透明色背景

3+4:组合透明色背景

1+2+3+4:组合背景图片(最底层)

有谁知道这是否可能以及如何实现?感谢您的帮助！

解决方案

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

Codepen Demo(如下)显示的结果比提供参考的 Stack Snippet 更好.

* {边距:0；填充:0；box-sizing: 边框框；}身体 {溢出:隐藏；/* 防止滚动条 */}.容器 {宽度:50%；保证金:自动；边距顶部:1em；位置:相对；溢出:可见；}.额外:之前{内容: '';显示:块；/* 覆盖引导程序 */位置:绝对；顶部:0；左:50%；宽度:100vw；高度:100%；变换:翻译(-50%，0)；}[class*="col"] {边框:2px 纯灰色；最小高度:120px；位置:相对；}.left:before {内容: '';位置:绝对；高度:100%；宽度:100vw；顶部:0；右:0；背景:rgba(255, 0, 0, 0.5)}.就在之前 {内容: '';位置:绝对；高度:100%；宽度:100vw；顶部:0；左:0；背景:rgba(0, 0, 255, 0.25);}

<div class="row"><div class="col-sm-4 left"></div><div class="col-sm-8 right"></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:50%;
  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);
}
[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  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

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