Ex:Travel1:背景設定

範例結果

一、背景設定

練習1:屬性設定介紹

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

練習2:背景圖置於底部 及  多個背景合併方法

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


/* 練習2-2:背景圖置於底部方法2:直接固定於螢幕下方*/
body{
  background: url(../img/bg01_top.png) repeat-x fixed,
              url(../img/bg01_left.png) no-repeat left bottom fixed,
              url(../img/bg01_right.png) no-repeat right bottom #e5fffc fixed;
}

練習3:線性漸層色彩

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

body{
  /* 練習3:線性漸層色彩*/
  background: url(../img/bg01_top.png) repeat-x fixed,
              url(../img/bg01_left.png) no-repeat left bottom fixed,
              url(../img/bg01_right.png) no-repeat right bottom fixed,
              linear-gradient(45deg,#ffddde,#ffe7c8,#e9ffdd,#fcffe4,#cffffb,#f3e4ff) fixed;
}

練習4:背景圖尺寸設定

參考連結:本網連結runoob 背景圖片、、

body{
  /* 練習4:背景圖尺寸設定*/
  background:url(../img/bg01.jpg) right bottom;
  background-size:cover;
}

/*全部背景彙整*/
body{
  background: url(../img/bg01_top.png) repeat-x fixed,
              url(../img/bg01_left.png) no-repeat left bottom fixed,
              url(../img/bg01_right.png) no-repeat right bottom fixed,
              linear-gradient(45deg,rgba(223, 96, 101, 0.475),rgba(238, 173, 87, 0.427),rgba(252, 255, 228, 0.476),rgba(111, 223, 214, 0.585),rgba(179, 104, 241, 0.631)) fixed,
              url(../img/bg01.jpg) right bottom fixed;
  background-size:auto,auto,auto,auto,cover;
}