--- tags: 公益程式體驗營 --- # 2. 切版任務二-聊天機器人-背景圖案與絕對定位教學 <!--ok--> ## vh 單位介紹: calc可做計算 單位vh:裝置高vh裝置寬vw可設定%佔滿螢幕多少 ## [background](https://www.w3schools.com/css/css_background.asp) 常用語法 * background-image * background-color * background-repeat * background-position * background-size: 可以設定大小，切版2的背景圓 手機跟桌機尺寸不同時可以改這裡 * [background 常用語法範例](https://codepen.io/tinchen/pen/qBxJQwE) ## 多重背景設計 * 多重背景：在背景background-image url後面， 加逗點再接著寫url接下一張圖片，位置跟重複也是加上逗點接著寫 (什麼! 就這麼簡單XDDD) * [多重背景範例](https://codepen.io/tinchen/pen/rNJKdmN) ``` .wrap{ margin: 0 auto; width: 1000px; height: 500px; outline: 5px solid red; background-image: url("https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball01.svg"),url("https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball02.svg"); background-repeat: no-repeat,repeat-x; background-position: left top,center bottom ; } ``` ## background縮寫 * [background](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background) mdn 文件說明 ``` /*縮寫*/ background: url(https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball01.svg) no-repeat left bottom,url(https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball02.svg) repeat-x right top; } ``` ## 實做banner第一顆球的兩種作法 * 觀念-滿版背景: - 外層先寫wrap，高度設定裝置高100vh，(寬度同瀏覽器不用設定)，background-position: -100px 100px; 用負值 [將圓藏起來範例](https://codepen.io/tinchen/pen/ExQOWGK)、[練習](https://codepen.io/tinchen/pen/NWyEpaB) - 內層再包一個container，讓其他內容可以限制在這範圍內 - 不建議寫在body，有無限的高度，不好給設定值 ### 圓球處理方案一： * [響應式背景圖案變換範例](https://codepen.io/tinchen/pen/BaYGRba): 圓在wrap區塊顯示，手機版時改在下個區塊content顯示並縮小 * 在斷點768px時 - wrap背景隱藏bakcground-imgae:none; - content需再複製一次背景，並縮小background-size: 126px 126px ``` <div class="wrap"> <div class="container"> </div> </div> <div class="content"> <div class="container"> <p>三大平台</p> </div> </div> ``` ``` @media (max-width:768px){ .wrap{ background-image:none; } /*再複製一次背景相關語法，讓他在手機版縮小顯示*/ .content{ background-image: url(...) background-size: 126px 126px; } } ``` ## 圓球處理方案二： [相對絕對定位作法範例](https://codepen.io/tinchen/pen/LYQXQoJ)、[練習靠右](https://codepen.io/tinchen/pen/RwQqQOd)、[練習靠左](https://codepen.io/tinchen/pen/dydQmgb) * 使用絕對定位的好處是不用受限於某個div，可以自由穿梭， 不過結構上會多出一個div，例如hiro_ball * 在wrap裡再新增一個div hiro_ball，定位在wrap，寬度設定需要顯示出來的200px就可以(整顆球是360px) * 設計稿圓在兩個區塊中間，top設定裝置高，在扣回一半的圓180px就可以啦! top: calc( 100vh - 180px); ``` <div class="wrap"> <div class="hiro_ball01"></div> <div class="container"></div> </div> <div class="content"> <div class="container"> <p>三大平台</p> </div> </div> ``` ``` .wrap{ height: 100vh; background-color: #000; position: relative; } .hiro_ball01{ position: absolute; top: calc( 100vh - 180px); left: 0; width: 200px; height: 360px; background-image: url(https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball01.svg); background-position: right; } ``` * 下面是錯誤範例，用絕對定位寫負值right-200px推會產生x軸，也不能用overflow: hidden來隱藏 ``` <body style="overflow: hidden;"> <div class="wrap"> <div class="hero_ball"></div> <div class="conatiner"></div> <div> </body> ``` ``` .hiro_ball01{ position: absolute; /*這裡會產生x軸 錯誤示範*/ right: -200px; top: 200px; height: 360px; width: 360px; background-image: url(https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball01.svg); } ``` * 手機版 .hiro_ball 設定裝置高top:100vh，就可以把圓推到下個區塊了，在修改大小即可 ``` @media (max-width:768px) { .hiro_ball01{ top: 100vh; width: 49px; height: 126px; background-size: 126px; } ``` ## 同學範例 [discord加碼作業](https://chalk-freedom-ec6.notion.site/b7c8b8022d834be988c578a077904b1f?v=26f66e55fbdf49998c63fba943025020) 這裡可以看到老師整理的同學範例 * [irenelee](https://irenelee18.github.io/chatTalker/) - 圓: 在最上方第一個div，單獨放ball，使用絕對定位推到相對應的位子 (這個寫法人生太難了要推很久哈哈哈) - 首頁不是使用100vh，有些設計公司希望首頁打開是滿高100vh ![](https://i.imgur.com/KQyaOWR.png) - 黃底背景: 結構在nav上方，寫2個div放桌機版和手機版的黃底背景，圖片連結寫在行內+絕對定位，桌機隱藏小張圖片，手機版再開啟 ![](https://i.imgur.com/LQBL24l.png) - 人物: 寫在banner裡用img標籤 * [Amberhh](https://iamamberhh.github.io/chatTalker/) - 黃底背景: 在body內的第一層包住所有區塊，用background-image+background-position，手機版的時候換小張圖 - 人物: 寫在header裡用img標籤 ![](https://i.imgur.com/Wvq0uYw.png) - 圓: 分別寫在三大平台、任何角色我都給、好評如潮的最外層用一個div包起來放背景background-image，和mb-100同一層 ![](https://i.imgur.com/J2lb62w.png) * [Stella](https://tingjuanhuang.github.io/chat_talker/index.html) - 黃底背景和圓: 寫在各區域的外層，沒有用絕對定位，這方式很乾淨 - 首頁是設定100vh，不過因為圓寫在第二塊的背景，所以會顯示"三大平台，我來搞定" - 人物: 也是用img標籤 ![](https://i.imgur.com/jxtvV9r.png) * [agnes](https://tzuchienkao.github.io/f2e-exam/hexschool/chat_talker/) - 黃底背景+人物: **使用多重背景圖**，先放人物再放黃底，這個方式我喜歡!! ![](https://i.imgur.com/5qnl2AW.png) - 圓: 直接把三個圓都寫在body，往下推例如312vh就是3個佈局，哈哈哈，也太方便 (老師說這樣的寫法風險比較高 也是可以用) ![](https://i.imgur.com/tox3AyT.png) ## 方案選擇 方案選擇價格的地方，可用overflow-x:auto; (範例overflow:hidden;是多寫的) 讓左右滑動 或是所有價格方案都顯示出來 兩種都可以 [可參考agnes的寫法](https://tzuchienkao.github.io/f2e-exam/hexschool/chat_talker/) ![](https://i.imgur.com/BwOiYdm.png) ## footer ![](https://i.imgur.com/D4kOHtT.png) ## 補充 * [background-size：cover 的妙用](https://youtu.be/1EYUsAlVqY0?t=577) * [背景每日任務](https://hackmd.io/UYD08C_jRxODb5OvqhK9ZA?both) <!-- <small>看完別人的覺得自己是在忙什麼!!! 哈哈哈我的也包太多層div了....</small> --> * [課程講義](https://hackmd.io/szxDjgPTTFyIXnmRfabgMQ?view)