Question

我尝试用背景颜色填充容器流体的填充物。我的容器流体填充0 120px

我发现它应该像那样工作

＆＃13;

.container-fluid {
  padding: 0 120px;
  background-clip: padding-box;
  background: grey;
}

.content {
  height: 1000px;
}

＆＃13;

<div class="container-fluid">
  <div class="row content">
    <div class="col-12">
      Content
    </div>
  </div>
</div>

＆＃13;

但不知怎的，这似乎不起作用，我做错了什么？

https://codepen.io/Insane415/pen/WMXdVy

Answer 1

使用absolute定位:after也background-clip & background-image。

解决方案1：使用background-clip & background-image

＆＃13;

.container-fluid {
  padding: 0 120px;
  background-clip:  content-box, padding-box;
  background-image: linear-gradient(to bottom, white 0%, white 100%), linear-gradient(to bottom, grey 0%, grey 100%); 
}



.content {
  height: 1000px;
}

＆＃13;

<div class="container-fluid">
  <div class="row content">
    <div class="col-12">
      Content
    </div>
  </div>
</div>

＆＃13;

解决方案2：

使用：positioning

＆＃13;

.container-fluid {
  padding: 0 120px;
  background-clip: padding-box;
  background: grey;
  position: relative;
  z-index: 10;
}

.container-fluid:after{
    background-color: white;
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 120px;
    right: 120px;
    bottom: 0px;
    z-index: -1;
}


.content {
  height: 1000px;
}

＆＃13;

<div class="container-fluid">
  <div class="row content">
    <div class="col-12">
      Content
    </div>
  </div>
</div>

＆＃13;

没有定位＆amp;在这种情况下，背景剪辑可以工作..

＆＃13;

.container-fluid {
  padding: 0 120px;
  background-clip: padding-box;
  background: grey;
}

.content {
  height: 1000px;
  background: white;
}

＆＃13;

<div class="container-fluid">
  <div class="row content">
    <div class="col-12">
      Content
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果我没错，你正在寻找这样的东西：

.content{
    background-color: white;
}

如果我的假设错了，请告诉我。

如何填充背景颜色仅用于Bootstrap的容器流体的填充？

2 个答案: