时间戳

首页 > 解决方案 > “.col-md-6”内“.row”的整个一半的 CSS 背景

html - “.col-md-6”内“.row”的整个一半的 CSS 背景

问题描述

我正在尝试为半行设置背景，如图所示，剖面图灰色代表背景图像。

但是当我设置第二个 .col-md-6 的背景时，它只设置了背景并忽略了填充。我明白这就是它的本意。但我希望在实现我想要的布局的同时获得有关如何解决这个问题的建议（如图所示）。我正在使用引导程序 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);
}

标签： htmlcssuser-interface

解决方案

我假设您正在使用 Bootstrap。.row 类具有与其父级相关的边距。而且由于 .col-md-6 在 .row 元素内，它必须尊重其边界（这就是 HTML 和 CSS 的工作方式），除非您将 .col-md-6 类的位置设置为“绝对”，但这不是开箱即用引导程序的默认行为。

您可以考虑使用 .row-fluid，它会更改边距，但如果您想保留该填充，则需要制作一些自定义 css 以在 .col-md-6 类中制作填充。

请记住：边距>边框>填充

背景仅应用于边框内。

推荐阅读