极客观点
项目管理
HarmonyOS
问题描述
前提：size、position、origin、clip默认，repeat设为no-repeat。此时从padding边界开始显示图片我能理解
问题：
- 设background-position:center center;后从显示效果上看background-origin的值好像变成了border-box？（图片从boder边界开始显示）
- 在1的基础上(position水平垂直都居中)，size设为cover，为什么只有左右溢出padding边界？
- size设为cover，其他三个值默认，为什么只有右边溢出？
（默认值border-origin:padding-box;且background-clip:border-box;的显示范围不是应该和四个值默认一样吗？但为什么border的下边却没有显示背景图？）
相关代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.bg
{
width: 300px;
height: 300px;
border: 50px solid rgba(255,0,0,0.2);
padding: 50px;
background: url(test.jpg) no-repeat;
}
.padding-box
{
width: 300px;
height: 300px;
position: absolute;
left: 50px;
top: 50px;
border: 50px solid rgba(255,255,0,0.4);
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="padding-box"></div>
</body>
background-origin是设置图片的参考区域的。并不具有裁剪功能，裁剪是backgroud-clip属性.
background-clip默认是border-box。也就是从边框裁剪。
background-origin默认是padding-box。也就是说图片的起始参考区域是padding的位置，你可以理解为坐标系是在padding区域。
background-position 为每一个背景图片设置初始位置。 这个位置是相对于由
background-origin定义的位置图层的。A: 设置position：center center意思是把图片的中心区域显示在参考区域中。坐标系是不动的，移动的是图片，那么自然在坐标系的四个象限是都有图片区域的，而这个区域是超过border的。又因为clip默认是border-box的，所以就四边全显示了。
A:cover的意思可以理解为将图片等比缩放使图片的最短边可以完全显示。可以完全显示的意思是显示在参考区也就是origin的值。默认是padding-box. 因为你的参考区是一个正方形，而你的图片是一个宽 > 高的横向长图片，所以高是完全展示的，那么横向就会溢出发生裁剪，而又clip默认是border-box，所以border上是可以显示图片的。也就是第3问所展示的样子，那么第2问只是多了position,从第一问中可以知道，position其实是移动图片的。center center会使图片左移，即以padding为坐标系y轴，等分图片，那么显然左边也有图片显示出来了。
background-origin其实是有原点的意思的，好比transform-origin。但因为背景图比较特殊，元素是有宽高的，所以它不像tranform一样是设置某一个点，而是一个box区域，我认为可以把origin的值看做是一个点，这样便于去想象图片在坐标系中的移动及显示，origin是padding-box，那就把整个padding包裹的区域想成是一个点，坐标系的原点即该点。然后再去想象position对图片的作用，这样可能比较好理解