CSS Offset 封面背景图片

Question

我使用background-size: cover 具有以下背景，我想将其向左偏移一点。

.landing {
  display: flex;
  padding: 2rem 4.5rem;
  height: 100vh;
  width: 100vw;
  background-image: url('~assets/img/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

如果我使用封面，我无法抵消我的形象，所以我尝试这样做

.landing {
  background-size: 110%;
  background-position: right 10% center;
}

但我最终在图像的顶部和底部出现空白，因为它不会扩展以尊重图像的纵横比（高度设置为自动）。

在不使用封面的情况下，如何设置正确的背景尺寸百分比以避免在任何屏幕尺寸的图像顶部/底部出现空白并保持纵横比？

Answer 1

要让背景稍微向左移动但仍然完全填充，您可以将其放在 before 伪元素上，这样您就可以在不影响主元素的情况下对尺寸和定位进行大量控制。

这是一个示例，我们希望将背景移动到左侧 30 像素处。伪元素的宽度为 + 30px，但向左平移了 30px。

.landing, .landing:before  {
  position: relative;
  display: flex;
  padding: 2rem 4.5rem;
  height: 100vh;
  overflow: hidden;
}

.landing {
  position: relative;
  display: flex;
  width: 100vw;
}

.landing:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100vw + 30px);
  transform: translate(-30px);
  background-image: url('https://picsum.photos/id/1049/1024/768');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
}

<div class="landing"></div>

注意：在 % 方面需要更复杂的算术（假设伪元素的 % 宽度大于原始元素）！