如何在底部为所有 3 个对齐的图像创建透明文本框叠加层

Question

我正在尝试在我的图片库上创建一个透明的文本框叠加层。

我尝试创建一个半透明的文本框叠加层，但是，半透明框在图像底部没有对齐。

.articles-detail {
    position: absolute;
    display: block;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    color: #f1f1f1;
    width: calc(33.33% - 100px);
    padding: 1px;
    text-align: center;
    z-index: 1;
}

这是代码：
https://codepen.io/usernametakenchooseanother/pen/agNyKM

这也是我想要的样子：
例 1
示例 2

Answer 1

您可以在演示中看到我的代码： https://codepen.io/phuongnm153/pen/ewZPbY

你应该改变 css：

.column {
  flex: 33.33%;
  margin: 50px;
  position: relative;
}
.articles-detail {
    position: absolute;
    display: block;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f1f1;
    width: 500px;
    text-align: center;
    z-index: 1;
}

Answer 2

您必须通过这样做来使父元素的位置postion:relative，在子元素中使用position: absolute时，它会相对于父元素进行绝对的 elmemt 位置并更改图片详细信息的底部位置。由

.column {
      position:relative;
      flex: 33.33%;
      padding: 50px;
    }
    .articles-detail {
        position: absolute;
        display: block;
        bottom: 55px;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.6);
        color: #f1f1f1;
        width: calc(33.33% - 100px);
        padding: 1px;
        text-align: center;
        z-index: 1;
    }

Answer 3

添加一个包装器relative围绕图像和文本。

添加以下 CSS

.wrapper {
  position: relative;
}
.articles-detail {
  width: 100%;
}

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 50px;
}
.articles-detail {
  position: absolute;
  display: block;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
  color: #f1f1f1;
  width: calc(33.33% - 100px);
  padding: 1px;
  text-align: center;
  z-index: 1;
}
/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .featured-image-container {
    height: 300px;
  }
}
.wrapper {
  position: relative;
}
.articles-detail {
  width: 100%;
}

<div class="row">
  <div class="column">
    <span class="wrapper">
              <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500">
              <div class="articles-detail"> 
                  <h1>
                      Title
                  </h1>
                  <h3>
                      Seconds
                  </h3>
              </div>
          </span>
  </div>
</div>
</body>
</html>

Answer 4

如果您不想使用媒体查询，则可以使用引导模板，以便根据您的要求做出响应。

引导4的网格系统：https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

引导程序 3 的模板：https://www.w3schools.com/bootstrap/bootstrap_templates.asp

您可以使用 Bootstrap 4 执行该模板

Answer 5

您可以将

flex用于容器，absolute位置用于img，文本。

* {
  box-sizing: border-box;
}
.row {
  height: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* Create three equal columns that sits next to each other */
.column {
  margin: 0 30px 30px 0;
  height: 100%;
  width: 300px;
  position: relative; 
  display: flex;
}
.img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height; 100%;
}
img {
  position: absolute;
  left: -50%;
  max-height: 300px;
}
.articles-detail {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #f1f1f1;
    padding: 1px;
    text-align: center;
}

<div class="row">
    <div class="column">
      <div class="img-wrap">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div class="articles-detail">
            <h1>
                Title
            </h1>
            <h3>
                Second
            </h3>
        </div>
    </div>
    <div class="column">
      <div class="img-wrap">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div class="articles-detail">
            <h1>
                Title
            </h1>
            <h3>
                Second
            </h3>
        </div>
    </div>
    <div class="column">
      <div class="img-wrap">
        <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div class="articles-detail">
            <h1>
                Title
            </h1>
            <h3>
                Second
            </h3>
        </div>
    </div>
</div>