[TIL] CSS Break down (background)

スクリーンショットは本当に無理です.😅

https://github.com/ssssssjay/learning/blob/main/background-image.html

下の要素をすべて注釈して、背景の画像は1つの大きい画像を用意して、1つの小さい画像、注釈の過程の中で感じを探します.
background-image
背景画像を挿入し、予想される場合は2種類あります.

は、

を背景画像として使用する

タグは意味がないかもしれませんが、仮想要素に

を入れるイメージが必要です.
構造を判断するのが上手で、適切に使う.

background-image: url();

著作権問題のないイメージならOK.
△無料の画像サイトでも、ビジネスの利用可能性や出典があるかどうかを確認しましょう.
background-repeat
背景画像の繰り返しを設定します.一般的にはno-repeatです.

/* x, y축으로 반복 */
background-repeat: repeat;
/* x축으로 반복 */
background-repeat: repeat-x;
/* y축으로 반복 */
background-repeat: repeat-y;
/* 반복 없음 */
background-repeat: no-repeat;

background-position
背景画像の位置を指定します.

/* default이며 x축, y축으로부터 0%인 지점을 의미 */
background-position: 0% 0%;
/* top, left, right, center 등이 있다 */
background-position: top left;
/* x축, y축으로부터 2px 2px인 지점을 의미 */
background-position: 2px 2px;

background-attachment
要素がスクロールされた瞬間、背景画像はどのようにスクロールするかを意味します.
(文字解釈より直接やった方が分かりやすい)

/* 같이 스크롤 됨 */
background-attachment: scroll;
/* 뷰포트에 고정이 되어, 스크롤 되지 않음 */
background-attachment: fixed;
/* 같이 스크롤 됨 */
background-attachment: local;
/* overflow: [auto, scroll] 이 속성이 필요함*/

background-sizecoverとcontainの説明は少し真実ではありませんが、一般的な「背景画像」の特性を考えてみましょう.
横にもっと長い背景があるとしましょう.(1200*900)
ではここでイメージに合わせてもっと広い場所で、
これは、横寸法を一定に保ちながら4:3の元の割合を維持することを意味する.(ちょっと難しい)
これも、自分の目で見ることが大切です.

/* 원래의 크기대로 보여짐 */
background-size: auto;
/* 가로 세로 의 형태로 작성해주며, 하나만 입력시 비율에 맞춰 자동조정 */
background-size: px, em, %;
/* 비율유지 + 이미지의 더 넓은 곳에 맞춰짐 */
background-size: cover;
/* 비율유지 + 이미지의 더 짧은 곳에 맞춰짐 */
background-size: contain;

background-originpositionと混同される可能性がありますが、これはbox-modelに関連する属性です.

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

background-clip
出力の範囲を指定します.難しいですが、マットやダウンジャケットの価格要因に適用すれば、すぐにわかります.

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

>コメントサイト

https://heropy.blog/