100% высоты фона, начиная с 50% по горизонтали

Question

Желаемый эффект: фоновое изображение с высотой 100% и горизонтально начинается с 50% элемента.(Фон заканчивается перед правым концом элемента, или переполнения скрываются на правом краю элемента в зависимости от соотношения размеров изображения / элемента)

MDN "A <length> или <percentage>. Это указываеткоордината X относительно левого края, с координатой Y, установленной на 50%. "

Поэтому я попытался установить background-position:50%;но странно, что это центрирует фоновое изображение горизонтально.Фоновая ось установлена ​​в центр при использовании% значений?Даже пример MDN демонстрирует такое поведение.

Я знаю, что для достижения этого эффекта существует "хак" с псевдоэлементом :after, мне просто интересно, возможно ли это с помощью "фоновых" свойств css?

Answer 1

Как вы уже заметили, и, как я объяснил, здесь 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