Question

我正在尝试使用Bootstrap 4为博客文章设置缩略图网格。

列的大小为col-md-6。每列内都有一个带有背景图片的锚点，以及黑色的->透明渐变叠加层。

一切正常，但是，如下面的图片所示，渐变叠加层扩展到了容器的宽度之外。

标记：

<div class="container homeSection">
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </div>
</div>

CSS：

.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

这是我想要的结果：

如何不使用bootstrap 4 no-gutter类而获得绝对定位的渐变以仅保留在锚中而没有溢出？

Answer 1

在CSS中添加规则：

.img-holder { position: relative; }

我认为您的问题是.dualGradient的位置是绝对的，但是设置位置的最近的父级是.dualBlogCallout。

默认情况下，任何具有position: absolute的元素都将沿标记向上移动，以找到具有明确设置位置的最近元素。

Answer 2

您的position: relative;班上缺少

img-holder。这是显示您的代码的解决方案。

注意：我添加了边框半径类，因为该类不包含在原始帖子中

.img-holder {
  position: relative;
}
.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

.border-radius-15 {
  border-radius: 15px;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container homeSection">
  <br><br>
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </div>
</div>

用天沟将溢出隐藏在列上

2 个答案: