Ex:Bakery1:背景設定

範例結果

一、背景設定

練習1:屬性設定介紹

body{
  /* 練習1-1:屬性設定 */
  background-image: url(../image/bg01.png);
  background-repeat: repeat-x;
  background-color: #FFEBE7;
  /* 練習1-2:屬性集合設定 */
  background: url(../image/bg01_01.png) repeat-x #FFEBE7;
}

練習2:背景圖置於底部方法

/* 練習2-1:背景圖置於底部方法1:頁面撑高與視窗等高*/
html,body{
  /* height: 100%; */
  height: 100vh;
}
body{
  background: url(../image/bg01_02.png) repeat-x left bottom #f7f2ca;
}


/* 練習2-2:背景圖置於底部方法2:直接固定於螢幕下方*/
body{
  background: url(../image/bg01_02.png) repeat-x left bottom fixed #f7f2ca;
}

練習3:多個背景合併

body{
  /* 練習3:多個背景圖合併*/
  background:url(../image/bg01_01.png) repeat-x, url(../image/bg01_02.png) repeat-x left bottom #f7f2ca;
}

練習4:線性漸層色彩

參考連結:本網參考runoob線性漸層色彩、、

body{
  /* 練習4:線性漸層色彩*/
  background:url(../image/bg01_01.png) repeat-x, url(../image/bg01_02.png) repeat-x left bottom fixed,linear-gradient(45deg,#ffddde,#ffe7c8,#e9ffdd,#fcffe4,#cffffb,#f3e4ff) fixed;
}