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

CSS CSS
CSS

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

取り消し線

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

をbackground-imageに指定

サンプル表示

CSS

画像を重ねる

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

をbackground-imageに指定

サンプル表示

CSS

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

タイトルとURLをコピーしました