css - 将背景位置从屏幕向左推

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

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

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

background-position: 100vw;

这工作得很好。但是我想反过来做同样的事情，将背景从屏幕推到左边(图 4)。如果我这样设置背景位置

background-position: -100vw;

它没有按预期工作(图 3-错误)，因为背景的原始点 (0,0) 始终位于左上角。

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

最佳答案

您可以更改引用并使用 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 .您还将在特殊情况

部分找到一种在容器外部制作背景的通用方法

关于css - 将背景位置从屏幕向左推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57974373/