background-clip有三个属性默认值为border-box
padding-box:将图片裁剪到内边距盒子以内
content-box:将图片位于内边距及其之外的部分裁剪掉
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-position: center; border: 10px solid rgba(220,220,160,.5); background-image: url(./img/cat.jpg); padding: 20px; float: left; } .a1{ background-clip: border-box; } .a2{ background-clip: padding-box; } .a3{ background-clip: content-box; } footer{ clear:left; } footer > span:nth-of-type(1){ margin-left: 80px; } footer > span:nth-of-type(2){ color: red; margin-left: 180px; } footer > span:nth-of-type(3){ margin-left: 150px; } </style> </head> <body> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <footer> <span>border-box</span> <span>padding-box</span> <span>content-box</span> </footer> </body> </html>