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