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

【问题标题】：Push background position off screen to the left将背景位置推离屏幕到左侧
【发布时间】：2019-09-17 12:37:24
【问题描述】：

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

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

如果我想把它一直推到屏幕外（图2），我只是设置

background-position: 100vw;

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

background-position: -100vw;

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

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

【问题讨论】：

你试过用 % 代替 vw 吗？
是的，它不起作用。
您能提供一些代码沙箱中的示例吗？
你能把整个代码发过来吗？
制作小提琴codepen.io

标签： css background-image background-position

【解决方案1】：

您可以更改引用并使用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。您还可以在 Special cases

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

【讨论】：

你让我开心

【解决方案2】：

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

【讨论】：