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包含在标题中。
我将标题的高度限制为500px。这允许自动缩放图像。

.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背景添加到多个不同的图像

2 个答案: