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

这就是我想要的样子：
Example 1
Example 2

Answer 1

在子级中使用postion:relative时，必须使position: absolute的父级位置相对于父级元素绝对位置，以改变图片细节的底部位置。通过

.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 2

在图像和文本周围添加包装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 3

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

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

Bootstrap 3的模板：https://www.w3schools.com/bootstrap/bootstrap_templates.asp

您可以使用Bootstrap 4来做该模板

Answer 4

您可以在演示中看到我的代码：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 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>

如何为所有3张对齐的图像在底部创建透明文本框覆盖

5 个答案: