这有点难以解释,这就是为什么我也无法在谷歌上找到答案。
我正在使用 Bootstrap 3,我需要一张全宽背景图片。在那 2 个透明颜色背景之上。我做了一个示例图像来说明一切:
1+2:组合透明色背景
3+4:组合透明色背景
1+2+3+4:组合背景图(最底层)
有谁知道这是否可行以及如何实现?感谢您的帮助!
最佳答案
是的,使用本 question 中概述的技术但将其扩展到列。
Codepen 演示(下方)显示的结果优于堆栈代码段,其中包含以供引用。
* {
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>
关于html - 具有 2 种不同背景(和 2 列)的 Bootstrap 全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33564131/