css img tint仅在图像不可见时才起作用(图像是否覆盖tint?)

Question

这个问题很简单，但我似乎找不到解决方案。我有一个个人资料的形象，我想成为有色悬停。正如您在代码片段中看到的，它只在图像不可见时才起作用。这是一个本地图像，所以我特意展示了一个图像存在和不存在的示例。有什么想法吗？

​

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

​

在这段代码中，使用了一张web图像来显示我的意思。

​

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

​

Answer 1

您不能使用伪元素来覆盖图像。将伪元素放在<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>标记和伪元素的更多信息。