CSS 背景設定 (一)

陳育霖

背景重複出現: background-repeat
repeat 預設，水平方向和垂直方向重複出現，repeat-x 水平方向重複出現，repeat-y 垂直方向重複出現，no-repeat 只顯示一次

1. body {
   
2.   backgorund-image: url(sea.jpg);
   
3.   backgorund-repeat: no-repeat;
   
4. }

複製代碼

背景圖片位置 background-position
left top、left center、left bottom、right top等，x% y%

1. body{
   
2.   background-image: url(sea.jpg);
   
3.   background-position: 30% 30%;
   
4. }
   
5. body{
   
6.   background-image: url(sea.jpg);
   
7.   background-position: 40px 30px;
   
8. }

複製代碼

背景圖片大小: background-size
auto 預設、length 寬度或高度、percentage 以父元素的百分比來設定、cover、contain

1. body {
   
2.   background-image: url(sea.jpg);
   
3.   background-size: cover;
   
4. }

複製代碼

背景圖片隨內容捲動 background-attachment
scroll 預設，fixed 不會捲動，local 在inframe顯示時，不會捲動

1. body {
   
2.   background-image: url(sea.jpg);
   
3.   background-size: cover;
   
4.   background-attachment: fixed ;
   
5. }

複製代碼