背景
CSS 背景設定的背景可以有以下幾種屬性:
- background-color
- background-image
- background-attachment
- background-repeat
- background-position
p {background-color: #FF6699;} |
背景顏色 |
p {background-image:url(eye.png);} |
設定背景圖案 |
p { background-image:url(eye.jpg); background-repeat: no-repeat; } |
設定背景圖案,並且不重複 |
p { background-image:url(eye.jpg); background-repeat: repeat-x; } |
背景圖片只有橫向重複 |
p { background-image:url(eye.jpg); background-repeat: repeat-y; } |
背景圖片只有 |
body { background-attachment: fixed; background-image: url(“eye.jpg”); } |
背景圖片將不隨捲軸捲動 |
body { background-attachment: scroll; background-image: url(“eye.jpg”); } |
背景圖片將隨捲軸捲動 |
body { background-image: url(“eye.jpg”); background-repeat: no-repeat; background-position: top center; } |
背景將貼齊畫面左邊正中間:設定垂直位置時可以使用 top, center, bottom 三種值來定義上、中、下;水平位置可以用 left, center, right 來定義左、中、右。 |
body { background-image: url(“eye.jpg”); background-repeat: no-repeat; background-position: 20% 50%; } |
背景將距離左緣20%距離,距離上緣50%距離:用百分比來定義背景位置時,第一個百分比是靠左 (x軸) 的距離,第二個是靠上 (y軸) 的距離。 |