--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/24 (二) 每日切版任務 - background 練習 ## 題目 * 用 Codepen 練習以下: 請修改[範例檔案](https://codepen.io/DoLucky/pen/ExQmboK)中的 CSS 完成以下設計條件： 1. box1 為垂直居中的不重複背景圖片，且背景色為 green 文字為白色 2. box2 為從左到右重複背景圖片，背景圖片起始位置從左上角開始，背景為黑色 文字為白色 3. 背景圖片連結請使用：https://i.ibb.co/3yhw5PR/string-of-beads.png 附上完成圖： ![](https://i.imgur.com/QznlV7H.png) <!-- ans: [background](https://codepen.io/DoLucky/pen/rNJwqGv?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun Codepen: https://codepen.io/yun_yunni/pen/ExQwyzY --> <!-- 2. Bruno Yu Codepen: https://codepen.io/bruno-yu/pen/poaWbGx --> <!-- 3. Kiwi #9804 Codepen: https://codepen.io/kiwi1113/pen/GRQMqVv --> <!-- 4. 小不點#1793 Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/JjprRPY --> <!-- 5. Jason Chen Codepen:https://codepen.io/jason60810/pen/JjprKgY --> <!-- 6.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/LYQzRPN --> <!-- 7. su#7798 codepen: https://codepen.io/wc-su/pen/YzerGXZ --> <!-- 8. Mitour#0672 codepen:https://codepen.io/mitour/pen/OJQxRMv --> <!-- 9. CloThEs codepen:https://codepen.io/bogwdnxx-the-sans/pen/NWyaRrL --> <!-- 10. Aaron Codepen : https://codepen.io/narrowd4c/pen/jOZGMMd --> <!-- 11. Patti Chiu Patti#7774 Codepen: https://codepen.io/peiru-qiu/pen/LYQzRWx --> <!-- 12. Noy https://codepen.io/MochiCodingPen/pen/VwQMKpW --> <!-- 13. han#9437 https://codepen.io/qnrxylcw-the-reactor/pen/YzerGOe --> <!-- 14. hw#0715 https://codepen.io/Lhwei/pen/yLvzaPm --> <!-- 15. yuyu#6310 https://codepen.io/yuyu0905/pen/ZErXpvY?editors=1100 --> <!--16. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/JjprRqy?editors=1100 --> <!--17. 楓之聲#6945 https://codepen.io/sshane258/pen/yLvzVNO --> <!-- 18. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/PoQJbzg?editors=1100 --> <!-- 19. Yawway Codepen: https://codepen.io/yawwoei/pen/PoQJGMV?editors=1100 --> <!-- 20. LHchien https://codepen.io/lin_chien/pen/QWQqGMy --> <!-- 21. andersonshen#4675 Codepen: https://codepen.io/luxyenni-the-bold/pen/poaWNaR --> <!-- 21. Cheng-Yu#1813 Codepen: https://codepen.io/ball77111/pen/ExQwNOL --> <!-- 22. Peng https://codepen.io/peng-027/pen/BaYwQvo --> <!-- 23. Hao#2485 https://codepen.io/hao216/pen/PoQJbBo --> <!-- Rex Chu Codepen: https://codepen.io/rex_chu/pen/NWyabqK --> <!-- 25. Knn#0492 Codepen: https://codepen.io/Knn_84/pen/KKQXaMy --> <!-- 26. Katie Codepen: https://codepen.io/Katie24/pen/jOZGVEE --> <!-- 27. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/eYVGgKb --> <!-- 28. Chi Codepen: https://codepen.io/YoChi84/pen/ExQwWyj --> <!-- Bao #4997 Codepen: https://codepen.io/baoh/pen/ExQwWPa --> <!-- 30. Jamie https://codepen.io/Wu220103/pen/bGLoqEK --> <!-- 31. Vera#5592 https://codepen.io/skvera/pen/RwQLpBM --> <!-- 32. Stanley https://codepen.io/sean_1215/pen/GRQMmZz --> <!-- 33. How#5806 https://codepen.io/howtobefine/pen/qBxPmqo --> <!-- 34. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/qBxPmPK --> <!-- 35. Chaco#2993 https://codepen.io/chaco-wang/pen/JjprJKz --> <!-- 36. RJRS#9430 https://codepen.io/RJRS/pen/NWyavKM --> <!-- 37. Muse#9741 https://codepen.io/mu24/pen/rNJGwbb --> <!-- 38. Nini Chen#5790 https://codepen.io/ninistyle/pen/yLvzoxL --> <!-- 39. lyle#8123 https://codepen.io/tomys/pen/RwQLZjx --> <!-- 40. hsiuhsiu https://codepen.io/hsiuhsiu/pen/Jjprror --> <!-- 41. Raymond Lam#0344 https://codepen.io/manshun-lam/pen/poaWWeb --> <!-- 42. #EVC1876 Codepen: https://codepen.io/elvi-chuang/pen/GRQMMqz --> <!-- 43. Leo Song codepen: https://codepen.io/sunnylaba/pen/abqLLjG?editors=1100 --> <!-- 44. ajhappy#6488 Codepen:https://codepen.io/ajhappy5438/pen/GRQMMLR --> <!-- 45. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/rNJGGqY --> <!-- 46. Joyce Codepen: https://codepen.io/joycehuang/pen/QWQqOQa?editors=1100 --> <!-- 46. RayChen#6088 Codepen: https://codepen.io/raychen1996/pen/XWZezLL --> <!-- 47. Cliff https://codepen.io/Cliff_hex/pen/qBxPpWO --> <!-- 47. 鉦勝 https://codepen.io/atckmax823/pen/zYRERON --> <!-- 50. Cynthia1111 https://codepen.io/Cynthia1111/pen/zYREdRr?editors=1100 --> <!-- 51. 花禮湖燒#7359 https://codepen.io/lai-pei/pen/mdXBXbG --> <!-- 52. bonnieli1414#4906 https://codepen.io/bonnieli1414/pen/RwQLQKq?editors=1100 --> <!-- 53. Arista https://codepen.io/arista-hsieh/pen/poaWaMw --> <!-- 54. RyanLu#3642 https://codepen.io/ryanlu1125/pen/QWQqQVE?editors=0100 --> <!-- 55. J_u_d_y#5993 https://codepen.io/J_u_d_y/pen/BaYwrmW --> <!-- 55. Josh Chen#4552 https://codepen.io/hiphop825/pen/VwQMXNa?editors=1100 --> <!-- 56. Ayre#0016 codepen:https://codepen.io/yichunlin09/pen/jOZGzKz?editors=1100 --> <!-- 58. Carrie#2750 codepen:https://codepen.io/carrie-wang/pen/yLvzjNZ --> <!-- 59. deveryone#8090 https://codepen.io/raycheng/pen/zYREjYg --> <!-- 60. weihsin#5643 https://codepen.io/weisin/pen/abqLGVN?editors=1100 --> <!-- 61. Lina Chen Codepen: https://codepen.io/LinaChen/pen/ExQwRJL --> <!-- 62. amy芳#1385 Codepen: https://codepen.io/amy-chieng/pen/yLvzqNz --> <!-- 63. SASIMI#5099 Codepen: https://codepen.io/sashimi1327/pen/gOvGjdg --> <!-- 64. 小王 https://codepen.io/stevetanus/pen/RwQLmpe --> <!-- 65. Jean https://codepen.io/jean-liu/pen/PoQJWgK --> <!-- 66. xuan#0808 https://codepen.io/xuan0915/pen/yLvzmgw --> <!--67. Greta#0837 https://codepen.io/gretali/pen/GRQOgrv --> <!--68. 小天#7177 https://codepen.io/linyujing/pen/wvyPgRe --> <!--69. JustinLiu Codepen: https://codepen.io/justin0227/pen/jOZavZQ?editors=1100 > <!-- 70. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/GRQMOPW --> <!-- 70. JessieCho https://codepen.io/jessieCho/pen/xxYPewv --> <!-- 71. Tori https://codepen.io/FlyTori/pen/VwQywag --> <!-- Codepen: https://codepen.io/Adif/pen/KKQZaLy --> <!-- 73. JackC Codepen:https://codepen.io/key0329/pen/eYVyWog --> <!-- 74. Charlotte Lee Codepen:https://codepen.io/charlotte-lee/pen/VwQyrdO?editors=1100 --> <!-- 75. skypassion5000#4151 Codepen:https://codepen.io/skypassion5000/pen/wvypXgQ?editors=1100 --> <!-- 76. mei#8421 Codepen:https://codepen.io/Shila-Chen/pen/QWQaVNO --> <!--77. Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/vYdpqwB?editors=1100 --> <!-- 78. danny123 codepen: https://codepen.io/binlandz123/pen/XWZZrKJ?editors=1100 --> <!-- 79.muzz#0345 https://codepen.io/yunnnz/pen/qBxxNrY --> <!-- 80. WilliamChou#7375 codepen: https://codepen.io/williampo78/pen/RwQQLKL --> <!-- 81.家洋#6999 https://codepen.io/yang940648/pen/poaaoNE?editors=1100 --> <!-- 82.yuling https://codepen.io/igzdflpu/pen/wvyyPZG --> <!-- 83.Erica Chen#6929 https://codepen.io/ericachen/pen/poaLWYX --> <!-- 84. Arvin#6347 codepen:https://codepen.io/family929317/pen/wvymVOJ?editors=1100 --> <!-- 85. Color#4378 Codepen:https://codepen.io/color0602/pen/OJQZbPW --> <!-- 86. ling chang#1024 Codepen:https://codepen.io/ling-chang/pen/zYRajeW --> <!-- 87. 白狐 Codepen: https://codepen.io/baihu7851/pen/XWZYPpR --> <!-- 88. Jumpye#8601 Codepen: https://codepen.io/Jumpye/pen/xxYaqNp?editors=1100 --> <!-- 89. 阿基基 https://codepen.io/JIJI_GNI/pen/PoQOjPw --> <!--90. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/yLvGgjz --> <!-- 91. zera#6060 codepen : https://codepen.io/zera-tseng/pen/ExQJmLY --> <!-- 92. 黑白兔#0684 codepen : https://codepen.io/johnny329/pen/abqrYrJ -->