时间戳

首页 > 解决方案 > CSS Offset 封面背景图片

css - CSS Offset 封面背景图片

问题描述

我有以下背景使用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;
}

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

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

标签： css

解决方案

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

这是一个示例，我们希望将背景移动到左侧 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>

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

推荐阅读