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