網頁設計實驗室

Web Design Laboratory

CSS CHEAT SHEET Backgrounds背景應用

Dec 3, 2024
Background

background-image (設定背景圖片) | 例 : background-image: url("abcd.jpg");
url | Gradients | none

background-position (背景圖片的位置) | 例 : background-position: left top;
top left | top center | top right |
center left | center center | center right
bottom left | bottom center | bottom right

background-size (設定背景圖片尺寸) | 例 : background-size: 寬度 高度;
length
auto | cover | contain

background-repeat (設定背景圖片重複拼接) | 例 : background-repeat: repeat;
repeat | repeat-x | repeat-y | no-repeat

background-attachment (設定背景圖片位置的捲動或固定) | 例 : background-attachment: scroll;
scroll | fixed | local

background-origin (定位背景圖片的原點位置) | 例 : background-origin: padding-box;
border-box | padding-box | content-box

background-clip (控制背景圖片顯示區域) | 例 : background-clip: border-box;
border-box | padding-box | content-box | no-clip

background-color (設定背景顏色) | 例 : background-color: lightblue;
color
transparent