从水平 50% 开始的 100% 高度背景答案

【问题标题】：100% height background starting at 50% horizontally从水平 50% 开始的 100% 高度背景
【发布时间】：2019-02-09 12:46:12
【问题描述】：

所需效果：高度为 100% 且水平从元素的 50% 开始的背景图像。（背景在元素右端之前结束，或者溢出隐藏在元素的右边缘，取决于图像/元素大小比例）

MDN "A <length> 或 <percentage>。这指定了相对于左边缘的 X 坐标，Y 坐标设置为 50%。"

所以我尝试设置background-position:50%;但奇怪的是，这使背景图像水平居中。使用 % 值时背景枢轴设置为中心？甚至 MDN 示例也显示了这种行为。

我知道有一个带有:after 伪元素的“hack”来实现这个效果，我只是想知道这是否可以通过“background”css 属性实现？

【问题讨论】：

"100% 高度背景从 50% 水平开始" "因此尝试设置 background-position:50%；但奇怪的是，这 将背景图像水平居中。 " 所以它做了你想做的事，但你发现奇怪的是 50% 与中心相同？
@RaymondNijland 不，想要的效果是：背景的 左边缘 位于元素的 50%，同时保持 100% 的高度。 developer.mozilla.org/en-US/docs/Web/CSS/background-position 如果你在这里设置 50% 50% ，你会看到背景完全居中。

标签： html css background-position

【解决方案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 内

【讨论】：

这非常接近，尽管它强制在元素上使用 add position: relative 和 position: absolute 在它的内容上。
@d.gabriel.asa 它将取决于内容，但正如您已经发现的那样，您可以考虑伪元素，因此它可能比这更好。我只是试图找到一种具有纯背景的方法，即使它不是我们应该在生产中使用的东西。