範例結果

前置作業,新增section設定

參考連結:本網(選取器基本類型及CSS屬性儲存方式)、、
html結構

  <div id="main">
    <div id="content">
      <section id="ptoduct">商品櫥窗</section>
      <section id="caketips">蛋糕小秘訣</section>
      <section id="movie">影片分享</section>
      <section id="map">門市位置</section>
    </div>
  </div>

CSS美化

section{
  height: 100vh;
}
/* section1 商品櫥窗 =============*/
/* section2 蛋糕小秘訣 =============*/
#caketips{
  background: url(../image/bg.png),linear-gradient(45deg,#ffddde,#ffe7c8,#e9ffdd,#fcffe4,#cffffb,#f3e4ff);
  background-size: 10%,auto;
}
/* section3 影片分享 =============*/
/* section4 門市位置 =============*/

回家作業:

#movie{
  background:url(../image/bg02_01.png) repeat-x fixed,
  url(../image/bg02_03.png) repeat-x  left bottom fixed,
  url(../image/bg02_02.png) repeat-x  left bottom fixed,
  linear-gradient(45deg,#ffddde,#ffe7c8,#e9ffdd,#fcffe4,#cffffb,#f3e4ff) fixed;
  background-size: 40%,40%,40%,auto;
}

 

練習5:背景圖尺寸設定

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

body{
  /* 練習5:背景圖尺寸設定*/
  background:url(../image/bg03.jpg) center bottom;
  background-size:cover;
}
/*課程範例 設定*/
#movie{
  background: url(../image/bg04.jpg) center center;
  background-size: cover;
}

練習6:多個背景合併

/*課程範例 最後設定*/
body{
  /* 練習6:多個背景圖合併*/
  background:url(../image/bg01_01.png) repeat-x, url(../image/bg01_02.png) repeat-x left bottom, url(../image/bg03.jpg) center bottom;
  background-size:auto,20%,cover;
}

練習7:條紋背景

repeating-linear-gradient 參考連結:參考runoob、、參考2、、、
/* section4 門市位置 =============*/
#map{
  /* 練習7-1: 條紋應用1 */
  background:linear-gradient(45deg,#eb7404 30%,#eb044d 30%, #eb044d 50% ,#55ff4f 50%,#55ff4f 70%,#614fff 70%,#614fff 80%,#047888 80%, #047888 100%);
  /* 練習7-2: 條紋應用2 */
  background:repeating-linear-gradient(45deg, #ffd0df 0px, #ffd0df 5px,#faf8de 5px,#faf8de 10px);
}