1 <style> 2 div{ 3 width: 100%; 4 height: 150px; 5 border: 1px solid red; 6 /*overflow: scroll;*/ 7 /*1.添加背景顏色*/ 8 /*background-color: blue;*/ 9 /*2.添加背景圖片 10 如果圖片大於容器，那么默認就從容器左上角開始放置 11 如果圖片小於容器，那么圖片默認會平鋪*/ 12 /*background-image: url("../img/d1.jpg");*/ 13 background-image: url("../img/h_bg.jpg"); 14 /*3.設置背景平鋪 15 round：會將圖片進行縮放之后再平鋪 16 space:圖片不會縮放平鋪，只會在圖片之間產生間距值 17 */ 18 /*background-repeat: round;*/ 19 /*4.設置在滾動容器的背景行為：跟隨滾動/固定*/ 20 /*fixed：背景圖片的位置固定不變 21 scroll:當前滾動容器的時候，背景圖片也會跟隨滾動 22 */ 23 /*local和scroll的區別：前提是滾動當前容器的內容 24 loccal：背景圖片會跟隨內容一起滾動 25 scroll：背景圖片不會跟隨內容一起滾動 26 */ 27 /*background-attachment: local;*/ 28 29 30 /*background-size:設置背景圖片的大小 寬度/高度 寬度/auto（保持比例自動縮放） 31 建議：在使用這個屬性之前確定寬高比與容器的寬高比是一致，否則會造成圖片失貞變形 32 */ 33 /*background-size: 50px 50px;*/ 34 /*設置百分比，是參照父容器可放置內容區域的百分比*/ 35 /*background-size: 50% 50%;*/ 36 /*設置contain：按比例調整圖片大小，使用圖片寬高自適應整個元素的背景區域，是圖片包含在容器內 37 1.圖片大於容器：可能會造成空白區域，將圖片縮小 38 2.圖片小於區域：可能造成空白區域，將圖片放大 39 */ 40 /*background-size: contain;*/ 41 /*cover:與contain剛好相反，背景圖片會按比例縮放自適應整個背景區域，如果背景區域不足以所有背景圖片，圖片會溢出 42 1.圖片大於容器：等比例縮小，會填滿整個背景區域，有可能造成圖片的某些區域不可見 43 2.圖片小於容器：等比例放大，填滿整個背景區域，圖片有可能造成某個方向上內容溢出 44 */ 45 background-size: cover; 46 /*圖片始終保持在頁面的中間*/ 47 background-position: center; 48 } 49 </style>