html - CSS图像色调仅在图像不可见时才起作用(图像覆盖色调？)

这个问题很简单，但是我似乎找不到解决方法。我有一个个人资料图片，我想在悬停时着色。如您在代码段中所见，它可以工作，但是仅当图像不可见时才起作用。这是本地图像，因此我特意显示了一个示例，该示例显示该图像是否存在。有什么想法吗？
 

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="static/images/richie.jpg" class="box overlay">

在此片段中，使用网络图像来显示我的意思。

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="https://www.thoughtco.com/thmb/HBaobb2gkXAlGq-a6K56PeyaLOg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/clouds-5b6b4e50c9e77c0050491212.jpg" class="box overlay">

最佳答案

您不能使用伪元素覆盖图像。
将伪元素放在<img>的容器中。

有关更多方法，请参考此post。

.img-container {
  position: relative;
  width: 350px;
  height: 150px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.img-container:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.img-container:hover:after  {
  opacity: .5;
}

<div class="img-container"><img onclick="sendMessage1()" id="picture1" src="https://via.placeholder.com/350x150" class="box overlay"></div>

请参考此post以了解有关<img>标签和伪元素的更多信息。

关于html - CSS图像色调仅在图像不可见时才起作用(图像覆盖色调？)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54573710/