背景画像をhtml,css側でトリミングするにはbackground-positionを使う(html,css)

こんにちは tanaka です。

背景画像(background-image)を
画像加工ソフトではなく
html ,css側で直接トリミングできないのかな、


思ったことはありませんか?

実は
background-position
を使えばできます。

background-position
は、領域からはみ出た部分は
表示しません。

これを利用し
トリミングすることができます。

今回はそんな、
background-position
を使ったトリミングについて
詳しく説明します。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

背景画像をトリミング

なぜそうなるのか

background-position

背景画像(background-image
を配置したとき、

背景画像(background-image

表示領域(width height)
より大きいと
背景画像は、表示領域からはみ出ます。

そして、
はみ出た部分は
画面に表示されません。

この
画面に表示されない
機能を利用して

background-position
を、トリミング目的で使います。

文字だけでは
イメージが湧かないと思います。

画像を使って説明します。

具体例

説明を分かりやすくするため
画像を用意しました。

 上:背景画像
    ・background-image
    ・トリミングされる画像
 下:置き場所
    ・画像を残す領域

bgposition画像50

今から、
背景画像(background-image)の左上を残し
他をカットします。

bgposition画像76
bgposition画像57

(注意)画像下は結果です。

上下の画像を見比べてください。

枠内
だけが残り
他はカットされました。

これでトリミングができました。

最後に、
大事なことを1つ

html,cssコードは、
自分だけで使うのなら良いのですが、
他の人へ渡すこともあります。

その時
html,css側で加工しすぎると
コードが難しくなり
次の人が困ってしまいます。

それを防ぐためにも

なるべく画像は、
画像加工ソフトで完成させておいて
あとは置くだけ
とした方が良いでしょう。

(完成図がしっかり決まっていればの話ですが)
(決まっていないことの方が多い気もしますが)

しかし、
background-position(トリミング)
その程度なら
大丈夫かと思います。

background-positionの使い方は
別記事を用意しました。

background-positionの使い方・背景画像が大きい
をご覧ください。

以上、
背景画像をhtml,css側でトリミングするには
background-positionを使う(html,css)
の話でした。

ありがとうございました。

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