繰り返しますが、この方法も完全ではありません。次のような問題点が
残されています。
世の中のさまざまなことと同じように、完全に正しいやり方はありませ
ん。このシークレットで紹介した合計 3 つのテクニックには、それぞれ長
所と短所があります。各自のプロジェクトでの要件に応じて、適切なもの
を選んでください。
▶ PLAY!
play.csssecrets.io/color‐tint
DudleyStorey(demosthenes.info)は、ブレンドモードとアニメーシ
ョンを組み合わせたトリックを考案しました(demosthenes.info/blog/
888/Create‐Monochromatic‐Color‐Tinted‐Images‐With‐CSS‐
blend)
}
.tinted‐image:hover{
background‐color:transparent;
}
CSSの中で画像のサイズをハードコードする必要があります。
厳密にはこの要素は画像ではなく単なる <div>要素にすぎないため、読
み上げソフトウェアが正しく解釈してくれません。
関連仕様
FilterEffects
w3.org/TR/filter‐effects
CompositingandBlending
w3.org/TR/compositing
CSSTransitions
w3.org/TR/css‐transitions