html - 图像上需要的文本和按钮

Question

我正在创建一个网络应用程序，我希望输出是这样的 -

.wrapper {
  font-size: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row wrapper">
    <img class="col" style="display: inline-block;
                    width: 25%; -webkit-filter: brightness(20%);
                    filter:brightness(20%);" src="Assets/imgs1.jpg" alt="?">

    <img class="col" style="display: inline-block;
                    width: 25%; -webkit-filter: brightness(20%);
                    filter:brightness(20%);" src="Assets/imgs2.jpg" alt="?">

    <img class="col" style="display: inline-block;
                    width: 25%; -webkit-filter: brightness(20%);
                    filter:brightness(20%);" src="Assets/imgs3.jpg" alt="?">

    <img class="col" style="display: inline-block;
                    width: 25%; -webkit-filter: brightness(20%);
                    filter:brightness(20%);" src="Assets/imgs4.jpg" alt="?">
  </div>
</div>

到目前为止，我已经实现了这一点

我无法在我的图像上添加文字

任何帮助都感激不尽 ：）

标签： htmlcsstwitter-bootstrap-3

Answer 1

这是一种使用:after伪元素来掩盖图像的策略，就像您显然想要做的那样。

.wrapper {
  height: 100px;
  overflow: hidden;
}

.col-img {
  width: calc(100% + 30px);
  margin-left: -15px;
  object-fit: cover;
  position: relative;
}

.wrapper:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, .25);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-3 wrapper">
      <img class="col-img" src="https://via.placeholder.com/800" alt="?">
    </div>
    <div class="col-xs-3 wrapper">
      <img class="col-img" src="https://via.placeholder.com/800" alt="?">
    </div>
    <div class="col-xs-3 wrapper">
      <img class="col-img" src="https://via.placeholder.com/800" alt="?">
    </div>
    <div class="col-xs-3 wrapper">
      <img class="col-img" src="https://via.placeholder.com/800" alt="?">
    </div>
  </div>
</div>