100％的高度的背景在50％的起始水平

Question

所需的效果：以100％的高度的背景图像和水平开始在元件的50％。 （背景中的元件的右端之前结束，或溢出隐藏在根据图像/元件尺寸比元件的右边缘）

MDN“A <length>或<percentage>。这指定的X坐标相对于左边缘，与该Y坐标设定为50％。”

于是，我就设置background-position:50%;但奇怪的是这个水平居中背景图像。背景枢轴使用％的值时，设置为中心？即使MDN例子显示了这种行为。

我知道有一个“黑客”与:after伪元素来达到这样的效果，我想知道这是可能的“背景”的CSS属性？

Answer 1

就像你已经注意到了，当我解释here background-position用百分比不会表现得像你可能认为。

一个想法，实现这一目标是考虑调整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内