使用CSS在圖像中覆蓋顏色層

Question

每當圖像具有tinted-image類時，我都想為tinted-image添加透明的紅色覆蓋層，我想使用CSS進行處理。 實際上，我想直接將其應用於img標簽。 這可能嗎？

我的JS小提琴

我嘗試了這個：

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