CSS背景-調整画像

3927 ワード

テキストリンク

🍬 background-image

background-image: url("../../media/examples/lizard.png");

2つのurlを書くと画像が重なり、上は少ない順に上に置きます.

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

背景画像の繰返し方法を設定します.△イメージ的には理解が早い.

すべての方向に画像を繰り返して、スペースを埋めます.

背景画像をxまたはy方向に繰り返し並べて空間を埋めます.

画像が切り取られていない直線上でのみ画像を繰り返して空間を埋めます.

スペースを埋めるために重複画像を追加

画像を繰り返さない.

各背景画像の初期位置を設定します.

背景画像を中心に
(それ以外は、大きな困難や重要な部分がないので、単独で整理せず、本書のスクリーンショット画面のみを添付します.)

背景画像のサイズを増やしたり、縮小したり、調整したりして、空間に適応することができます.

画像の切り取りや歪みを最小限に抑える

画像が変形しない範囲で最大値を設定します.
ただし、画像のアスペクト比が要素と異なる場合は、オーバーフローの方向が切り捨てられ、空白が発生しないようにします.

この問題について(CSS背景-調整画像), 我々は、より多くの情報をここで見つけました https://velog.io/@gygy/CSS-background-이미지-조정하기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol