Question

我试图在图像有tinted-image类的时候为图像添加透明的红色叠加层，我想用CSS做。实际上，我想直接应用它img标签。这可能吗？

我试过了：

<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

你可以使用以下方法获得类似的效果：如果有帮助的话？

.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>

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

1 个答案: