如何在 CSS 中添加图像叠加

debugcn 发表于 Dev

舍尔

.section{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.column{
  float: left;
  width: 33.33%;
}
.single-work{
  height: 100%;
  width: 100%;
  margin: 3em;
  overflow: hidden;
  display: block;
  position: relative;
}

<div id="section">
    <div class="column">
      <div class="single-work">
        <a>
          <img src="images/dog.jpg" style="width: 100%; height: 10em; padding: 0.5em;">
        </a>
      </div>
    </div>

我正在尝试在 CSS 中为我的图像添加一个叠加层，但我似乎无法在不弄乱其他东西的情况下做到这一点。

我已经尝试了几件事，包括将图像制作成背景图像以及其他人的建议，但它们没有奏效。我认为造成这种情况的原因可能是现有代码干扰了新代码

这是我的代码：HTML：

  <div id="section">
    <div class="column">
      <div class="single-work">
        <a>
          <img src="images/dog.jpg" style="width: 100%; height: 10em; padding: 0.5em;">
        </a>
      </div>
    </div>

CSS：

.section{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.column{
  float: left;
  width: 33.33%;
}
.single-work{
  height: 100%;
  width: 100%;
  margin: 3em;
  overflow: hidden;
  display: block;
  position: relative;
}

我想为此代码添加一个覆盖层，但到目前为止我尝试过的任何内容都没有奏效。有人可以帮我弄这个吗？

zaybi

在内部创建一个 div single-work（img并且div必须具有相同的父级！），如下所示：

<div class="column">
    <div class="single-work">
        <a>
          <img src="images/dog.jpg">
        </a>
        <div id="overlay></div>
    </div>
</div>

.single-work {
    position:relative;
}


#overlay {
    background-color:rgba(207,220,230,0.5);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

简而言之：