在 PNG 上使用网络工具包蒙版的颜色

Question

我知道如何使用图像来做到这一点，但它需要动态更改。使用颜色代替图像有什么技巧吗？关于使用 webkit 掩码的文档似乎很少。

我在可以离线使用的Chrome扩展程序中使用它（即我不能为此使用PHP）。

Answer 1

您可以使用具有彩色背景的伪元素，如 http://www.impressivewebs.com/image-tint-blend-css/

.tint {
  position: relative;
  float: left;
  cursor: pointer;
}
.tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, 0.5);
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -ms-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}
.tint:hover:before {
  background: none;
}

<figure class="tint">
  <img src="https://i.stack.imgur.com/e2VAF.jpg" alt="Example" width="400" height="260">
</figure>