Daco Note

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