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

CSS

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

取り消し線

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

をbackground-imageに指定

サンプル表示

CSS

画像を重ねる

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

をbackground-imageに指定

サンプル表示

CSS

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

関連記事

おすすめ記事

  • Windows

    2019.12.25

    リモートデスクトップなどで使用中のユーザーがいるか確認する

    サーバーにリモートデスクトップで接続したら誰かが使用中だった形跡があり気まずかったという経験が良くあります。 そんな時に接続する前にだれかがログインしていないか確認する方法をご紹介します。

  • テレワーク、リモートワークにおすすめのツール

    2020.4.20

    テレワーク、リモートワークにおすすめのツール

    今回はテレワーク、リモートワークにおすすめのツールを「クラウドインフラ」「ソース管理」「業務ツール」の三本立てでお送ります。代表的なものの紹介となるため、選択肢としてお役立てください。

  • CSS

    2019.8.18

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

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

  • Python

    2019.8.14

    Pythonでzipファイルを解凍せずにzipファイル内の指定したファイルを読み込む

    Pythonでzipファイルを解凍せずにzipファイル内の指定したファイルを読み込む方法について書きます。 zipファイル(sample.zip)内のxmlファイル(sample.xml)を読み込むサンプルプログラムです。 zipをディスク上に解凍せずに指定したファイルを読み込むことができるのでとても便利です。

  • design

    2020.2.19

    Microsoftから無料配布されているSVGファイル(Azure関連)

    Microsoft Azure Cloud and AI Symbol / Icon Set – SVGはMicrosoftが無料で配布している Azure および関連するクラウドおよびオンプレミステクノロジーを使用する機能とシステムを視覚的に表すためのシンボル/アイコンのセットということのようです。

ページ上部へ戻る