~~~ <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; */ }