CSSだけで画像をトリミングする

W:960px H:540pxの画像があります

この画像をcssのみでトリミングしてみます

「SA」の部分のみをみえるようにトリミング↓

See the Pen css-img-trim by AkiraSatou (@SatoWeb) on CodePen.dark

アドレス部分を見えるようにトリミング↓

See the Pen css-img-trim2 by AkiraSatou (@SatoWeb) on CodePen.dark

・imgファイルのコードを囲むようにclassまたはidを指定します。(今回は”img-trim”というclass名を指定)

・指定したclass名にトリミングのサイズを指定して、imgファイルをmarginを使って移動し、範囲を合わせます。

紹介しておいてなんなんですが、実例として上記のcssを指定したことはありません。小ネタとして紹介しました。


こんな時に使えるよ。と、アイディアがある人はTwitterなんかで教えてください。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。