css img tint 仅在图像不可见时有效（图像覆盖色调？）答案

【问题标题】：css img tint works only when image is not visible (image is covering tint?)css img tint 仅在图像不可见时有效（图像覆盖色调？）
【发布时间】：2019-02-07 12:47:18
【问题描述】：

这个问题很简单，但我似乎找不到解决方案。我有一张个人资料图片，我想在悬停时对其进行着色。正如您在 sn-p 中看到的那样，它可以工作，但仅在图像不可见时才有效。这是一个本地图像，所以我特意展示了一个图像存在和不存在的示例。有什么想法吗？

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

&lt;img onclick="sendMessage1()" id="picture1" src="static/images/richie.jpg" class="box overlay"&gt;

在这个 sn-p 中，使用网络图像来说明我的意思。

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

&lt;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"&gt;

【问题讨论】：

你能编辑你的标题吗？目前没有多大意义
有什么问题？它适用于您的第二个示例。你当地的形象有什么问题？检查并调试，我们无法修复您无法在 sn-p 中重现的内容。
谢谢，我只是想表明当图像不可见时（所以当它找不到时），它可以工作，但是当图像显示时，你看不到色调。我会修改标题，谢谢。
你不应该在 img 元素上使用 ::before/::after，stackoverflow.com/questions/5843035/…
感谢 04fs :) 使用 div 效果很好！

标签： html css hover tint

【解决方案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;
}

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

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

【讨论】：