我正在尝试为半行设置背景,如图所示 灰色代表背景图像。
但是当我设置第二个 .col-md-6 的背景时,它只设置了它的背景而忽略了填充。我明白这就是它的本意。但我希望就如何在实现我想要的布局(如图所示)的同时解决这个问题提出建议。我正在使用 Bootstrap 4。
到目前为止我的代码结构是:
<section>
<div class="container">
<div class="row">
<!-- LEFT SECTION -->
<div class="col-md-6">
<div class="container">
TITLE AND CONTENT LEFT
</div>
</div>
<!-- RIGHT SECTION -->
<div id="right" class="col-md-6">
<div class="container">
TITLE AND CONTENT LEFT
</div>
</div>
</div>
</div>
</section>
我的 CSS 是:
#right{
background-size:cover;
background-image: imageUrl;
}
//For overlay over image
#right:before{
content:"";
position: absolute;
left:0; right: 0;
top: 0; bottom: 0;
background: rgba(195,68,86,0.2);
}
最佳答案
我假设您正在使用 Bootstrap。 .row 类的边距与其父级相关。由于 .col-md-6 位于 .row 元素内,它必须遵守其边界(HTML 和 CSS 就是这样工作的),除非您将 .col-md-6 类的位置设置为“绝对”,但这不是开箱即用 Bootstrap 的默认行为。
您可以考虑使用 .row-fluid,它会改变边距,但如果您想保留该填充,则需要制作一些自定义 css 以在 .col-md-6 类中制作填充。
记住: 边距 > 边框 > 填充
背景仅应用于边框内。
关于html - '.row' 中整个一半的 '.col-md-6' 的 CSS 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50956767/