CSSで画像を加工せずに取り消し線を表示する方法

写真やロゴ、アイコンなどの画像を非活性(disabled)などの状態で表示したいときにわざわざ取り消し線の入った画像を準備しなくてもCSSを使用して実現させることが可能なのでご紹介します。
まずはそのまま画像を表示した場合の例です。

取り消し線

「linear-gradient」とレイヤー機能を使って取り消し線を表示した場合の例です。
background-imageの指定だけで取り消し線の入った画像を準備しなくても取り消し線を表示することが可能です。

サンプル表示

CSS

.sample1 {
    width: 48px;
    height: 48px;
    background-image: linear-gradient(-45deg,
    transparent 47%,
    red 47%,
    red 53%,
    transparent 53%,
    transparent),
    url(folder.png);
}

画像を重ねる

また画像を重ねて表示させることも可能です。
フォルダーの画像に虫眼鏡画像を重ねた場合の例です。
画像だけを重ねて表示することも可能なので、CSSで表現が難しい場合でも透過画像を重ねることで表現が可能です。

サンプル表示

CSS

.sample2 {
    width: 48px;
    height: 48px;
    background-image: url(find.png),
    url(folder.png);
}

これらの方法で無駄に画像を作成する手間が省けますね。