~~~ <div class="box"></div> ~~~ ~~~ .box { width: 300px; height: 100px; border: 10px dashed yellowgreen; padding: 10px; background: pink url("1.png") no-repeat; /*background-origin: padding-box;*/ /*background-origin: content-box;*/ background-origin: border-box; } ~~~ ~~~ padding-box 背景圖像相對于內邊距框來定位 border-box 背景圖像相對于邊框盒來定位 content-box 背景圖像相對于內容框來定位 ~~~ ~~~ <style> .box { width: 300px; height: 300px; margin: 50px auto; background: pink url("1.png"); border: 10px dashed yellowgreen; padding: 10px; /* 背景裁切 */ background-clip: border-box; /*!* 將背景圖片顯示到內容區域 *!*/ background-clip: content-box; /*!* 將背景圖片顯示到內邊距區域 *!*/ background-clip: padding-box; } </style> ~~~ .one { width: 200px; height: 200px; border: 1px solid red; background: url("2.jpg") no-repeat; /* 設置背景圖片大小 */ /* background-size: 200px 200px; */ /* 將背景圖片按照原來的縮放比，將整個容器鋪滿 */ /* background-size: cover; */ /* 將背景圖片按照原來的縮放比，完整的顯示到容器中 1. 不確定是否會將容器填充滿 */ /* background-size: contain; */ }