Css 如何使用：：after在图像上放置透明颜色？

问题：容器有200px的宽度，图像可以有动态宽度（100px，120px，随便什么）

img：：after根本不起作用

.包装纸{
位置：相对位置；
宽度：200px；
边框：1px纯黑；
}
.img响应{
显示：块；
最大宽度：100%；
身高：100%；
}
.img wrap:：之后{
显示：块；
位置：绝对位置；
内容：''；
宽度：100%；
身高：100%；
左：0；
排名：0；
背景色：rgba（40,40,60,0.1）；
}

我无法设置.img wrap的宽度，因为它会打断图像宽度

---

我的选项是什么？

对于：：after css3代码，我确信还必须包含：：before状态，以便文件读取after元素之前应该包含的内容。（请不要引用我的话，因为我不是100%确定，但是当我使用这些时，我还包括了一个：：之前）

---

使用：：after content:url（/path/to/image.jpg）；-图像按其精确尺寸插入，无法调整大小。因为像渐变这样的东西实际上是图像，所以伪元素可以是渐变。

您可以将以下CSS应用于

img wrap

.img-wrap {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

我在下面的演示中更改了颜色，以更清楚地显示

：after

.wrapper{
位置：相对位置；
宽度：200px；
边框：1px纯黑；
}
.img包装{
显示：内联块；
位置：相对位置；
垂直对齐：底部对齐；
}
.img响应{
显示：块；
最大宽度：100%；
身高：100%；
}
.img wrap:：之后{
显示：块；
位置：绝对位置；
内容：''；
宽度：100%；
身高：100%；
左：0；
排名：0；
背景色：rgba（255,0,0,0.2）；
}

---

您可以在不使用psuedoelements的情况下获得类似的结果：其思想是在图像本身上应用一个标记（在页面本身或外部URL上定义），因此无需对现有标记或父容器进行假设

---

标记

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="overlayfilter">
  <defs>
      <filter id="overlay">
        <feColorMatrix
          type="matrix"
          values=".4  0  0  0  0
                   0 .4  0  0  0
                   0  0 .6  0  0
                   0  0  0 .6  0 ">

        </feColorMatrix>
    </filter>
  </defs>
</svg>


<img class='img-responsive' src='http://via.placeholder.com/150x150' alt='' />

---

过滤器的颜色是这样定义的

<filter id="linear">
  <feColorMatrix
      type="matrix"
      values="R 0 0 0 0
              0 G 0 0 0
              0 0 B 0 0
              0 0 0 A 0 "/>
  </feColorMatrix>
</filter>

（）

---

因此，您可以根据需要调整覆盖颜色。

url（）

定义的过滤器当前在（）上实现。

您还可以使用css过滤器，这非常酷。很好的解释+1--注意到firefox上的图像只显示在hover上，而且由于Edge不支持

url

，因此在那里也不起作用。因此，只需为Firefox解决Chrome/Safari？问题，请参阅更新（它不喜欢隐藏的svg元素）。在Edge上，我只发现了这期2年的公开发行：

[id="overlayfilter"]  { display: block; height: 0; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: 100%;
  filter: url(#overlay);
}

.img-responsive:hover {
  filter: none;
}

<filter id="linear">
  <feColorMatrix
      type="matrix"
      values="R 0 0 0 0
              0 G 0 0 0
              0 0 B 0 0
              0 0 0 A 0 "/>
  </feColorMatrix>
</filter>