css - 为 PNG 上的 webkit mask 使用颜色

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="/image/e2VAF.jpg" alt="Example" width="400" height="260">
</figure>