疑似要素の背景画像で写真にフィルターをかける方法を紹介します。写真は 縦横比を維持したまま横幅いっぱいに画像を表示 で表示します。
HTML
補足
- span 要素に frame-img とフィルターのクラス（stripe, dot, border）を併記しています。
CSS
補足
- span.frame-img の疑似要素 before でフィルター用のブロック要素を作っています。
- stripe, dot, border クラスで、そのブロック要素の背景画像を設定しています。
- ここでは透明な背景に黒のドットまたは縞模様の PNG 画像を背景画像に設定しています。