将 rgba 背景添加到多个不同的图像

Question

我正在尝试将 rgba 背景添加到多个不同的图像。我正在使用 Bootstrap 并试图让它响应。但是好像出了点问题。

这是一个我正在尝试做的例子：

我的代码在这里 (HTML):

.text-caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}

<div class="container">
  <div class="row">

    <div class="text-center">
      <h3>This is some text</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

  </div>
</div>

非常感谢您的帮助！

Answer 1

您只需要将 z-index 添加到绝对定位元素并将相对定位添加到标题即可使您的代码正常工作：

.text-caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:2;
}

.caption {
  position:relative;
}

.caption:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index:1;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">

    <div class="col-md-12 text-center">
      <h3>This is some text</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

  </div>
</div>

Example Bootply

Answer 2

需要注意的几点：

选择的图像很大，为了使它们看起来适合它们所在的容器，overflow: hidden 包含在标题中。
我已将标题的高度限制为 500 像素。这允许自动缩放图像。

.text-caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption {
  max-height: 500px;
  overflow: hidden;
}

.caption:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}

.caption>img {
  width: auto;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="text-center">
      <h3>This is some text</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/4000x3000/ffb3d1/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/4000x3000/c2f0c2/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/4000x3000/cc99ff/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>
  </div>
</div>

将 rgba 背景添加到多个不同的图像

Add rgba background to multiple different images

css

rgba

twitter-bootstrap