Css 将背景位置推离屏幕到左侧

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

（图1）是我背景的原始位置

如果我想把它一直推到屏幕外的右边（图2），我只需要设置

background-position: 100vw;

这个很好用。然而，我想反过来做同样的事情，把背景从屏幕上推到左边（图4）。如果我这样设置背景位置

background-position: -100vw;

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

---

你们能告诉我如何达到图4的位置吗？谢谢

使用包装器，然后在这里转换背景我设置为-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;
}

一些内容
.body bg{
宽度：50vw；
高度：50vh；
背景：黑色；
位置：绝对位置；
z指数：0；
转化：translateX（-90%）；
}
.内容{
位置：相对位置；
}
h1{
颜色：红色；
}

---

使用包装器，然后变换背景。这里我设置为-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;
}

一些内容
.body bg{
宽度：50vw；
高度：50vh；
背景：黑色；
位置：绝对位置；
z指数：0；
转化：translateX（-90%）；
}
.内容{
位置：相对位置；
}
h1{
颜色：红色；
}

---

您可以更改参考并使用

right 100vw

正文{
保证金：0；
高度：100vh；
背景：
网址(https://picsum.photos/id/1/200/200)右99vw底部0无重复；
}

您可以更改参考并使用

右100vw

正文{
保证金：0；
高度：100vh；
背景：
网址(https://picsum.photos/id/1/200/200)右99vw底部0无重复；
}

你是否尝试使用%而不是vw？是的，它不起作用。你能在一些代码沙盒中提供一个例子吗？你能发送整个代码吗？制作一把小提琴你尝试使用%而不是vw吗？是的，它不起作用。你能在一些代码沙盒中提供一个例子吗？你能发送整个代码吗？制作一把小提琴你让我开心吗