使用 CSS 覆盖图像中的颜色层

Question

每当图像具有tinted-image 类时，我都会尝试向图像添加透明的红色叠加层，我想使用 CSS 来实现。其实我想直接应用img标签。这可能吗？

My JS fiddle

我试过了：

<img class="tinted-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg"></img>

还有 CSS：

.tinted-image {

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    )

}

什么也没发生。

我不想使用 div，如下所示。 问题是我想直接在img标签中实现。

<div class="tinted-div"></div>
.tinted-div {
  width:200px;
  height:200px;
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

请有人帮助我吗？ :(

Answer 1

如果有帮助，您可以使用 :after 获得类似的效果？

.overlay {
  position: relative;
  overflow: hidden;
}
.overlay:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 255, 0, 0.5);
}

<div class="overlay">
  <a href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg">
  </a>
</div>