css - 在 PNG 上为 webkit 蒙版使用颜色

Question

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

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

Answer 1

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

HTML

<figure class="tint">
  <img src="image.jpg" alt="Example" width="400" height="260">
</figure>

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