将背景位置从屏幕向左推

Question

背景为红色矩形屏幕是黑色矩形

(图1)是我背景的原位置

如果我想把它一直推到右边，离开屏幕（图2），我就设置

background-position: 100vw;

这很好用。但是我想反过来做同样的事情，将背景从屏幕推到左边（图 4）。如果我像这样设置背景位置

background-position: -100vw;

由于背景的原点 (0,0) 始终位于左上角，因此无法按预期工作（图 3- 错误）。

你们能告诉我如何实现Fig4位置吗？谢谢

Answer 1

使用包装器然后转换背景我这里设置为-90%但你可以设置为-100%:

<div class="body-bg"></div>
<div class="content"><h1>Some content</h1></div>

.body-bg {
  width: 50vw;
  height: 50vh;
  background: black;
  position: absolute;
  z-index: 0;
  transform: translateX(-90%); 
}
.content {
  position: relative;
}
h1 {
  color: red;
}

https://codepen.io/alexplummer/pen/JjPavBe

Answer 2

您可以更改引用并使用 right 100vw

body {
  margin:0;
  height:100vh;
  background:
    url(https://picsum.photos/id/1/200/200) right 99vw bottom 0 no-repeat;
}

有关更多详细信息的相关问题：Using percentage values with background-position on a linear gradient。在 特殊情况

部分中，您还将找到一种在其容器外部制作背景的通用方法

将背景位置从屏幕向左推

Push background position off screen to the left

css

background-image

background-position