CSS 語法 07:背景 background

背景

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軸) 的距離。