在 CSS 中的 <img> 元素上着色

Question

目标

当包含<li> 的图像具有active 类时，在图像顶部有一个彩色覆盖。它应该看起来像这样

所有图像上的默认叠加层也是深色的。但是激活时需要更换。下面的图像是较浅的黑白图像。

背景

我在这里找到了有关如何在图像顶部添加彩色叠加层的各种教程和答案。但大多数“图像”是一个 div 的background-image。

就我而言我无法更改 html 中元素的当前顺序。

问题

如何修改 CSS 以在图像上添加一个彩色图层？

默认图像为黑白。当<img> 的类为bw 时，它们将有一个深色覆盖。

如果包含<li> 处于活动状态，则深色叠加层将被橙色叠加层抵消。

所以看来我必须使用大量的继承才能取得成功。也许在bw 类之后有active 类？

li img.bw {
  background: rgb(3,3,3); /* dark overlay */
  opacity: .9;
}

li.active img.bw {
  background: rgb(246,137,28); /* orange */
  opacity: .5; 
}

代码

Codepen上的演示

HTML

  <li class="active">
    <a href="">
      <img class="bw" src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
    </a>  
  </li>

  <li>
    <a href="">
      <img class="bw" src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
    </a>
  </li>

CSS

/* demo only */
.li {
  width: 100px;
  height: 100px;
  display: inline-block;
}
img { height: 200px;  width: 160px;}
/* styles for overlay */
li img.bw {
  background: rgb(3,3,3);
  opacity: .9;
}
li.active img.bw {
   background: rgb(246,137,28);
   opacity: .9;
}

Answer 1

达到您想要的效果的一个很好的解决方案是使用::after 伪元素：

li, li a, li a img {
display: inline-block;
width: 120px;
height: 160px;
}

li {
position: relative;
margin-right: 20px;
}

li a {
position: absolute;
top: 0;
left: 0;
}


li a::after, li.active a::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 120px;
height: 160px;
}

li a::after {
background-color: rgba(0,0,0,0.2);
}

li.active a::after {
background-color: rgba(255,128,0,0.5);
}

<ul>
 <li class="active">
    <a href="">
      <img class="bw" src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
    </a>  
  </li>

  <li>
    <a href="">
      <img class="bw" src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
    </a>
  </li>
</ul>