所需效果：背景图像的高度为100％，水平方向为元素的50％。 （背景在元素的右端之前结束，或者根据图像/元素的大小比隐藏在元素的右边缘上而溢出）
MDN“ A <length>或<percentage>。它指定相对于左边缘的X坐标，而Y坐标设置为50％。”
所以我试图设置background-position:50%;但是奇怪的是这使背景图像水平居中。
使用％值时背景支点是否设置为居中？
甚至MDN示例也显示了这种行为。
我知道有一个使用:after伪元素的“ hack”来实现此效果，我只是想知道使用“ background” css属性是否有可能？
答案 0 :(得分：0)
就像您已经注意到的那样，正如我向here background-origin所解释的那样，百分比不会像您想象的那样表现。
要实现这一目标，可以考虑如下调整.box {
padding-left:50%;
height:300px;
border:1px solid;
background:url(https://picsum.photos/200/200?image=1069) left/100% auto no-repeat;
background-origin:content-box;
}：
<div class="box">
</div>padding
诀窍是让content-box覆盖一半的宽度，然后我们开始将背景放置在Array.sort