Question

我正在尝试创建一个版面布局，在该版面中，我只希望图像的一半显示在该部分的右下角。我可以调整背景的位置和大小，但是当我开始调整窗口大小时，图像会消失，或者从我实际希望的位置移动。我基本上只是希望布局能够响应。我不能将px值用作背景位置，因为当我稍微调整窗口时，背景图片看起来就放错了位置。

我的代码（您需要全屏显示代码片段才能看到我想要的样子）：

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.one {
  background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
    height: 100vh;
}

.two {
  background: #f3f3f3
}

<section class="one">
  <header>First Section</header>
</section>
<section class="two">
  <header>Second Section</header>
</section>

任何帮助将不胜感激。或者，如果这不可能。我还尝试使用Transform，但效果也不理想。

Codepen

Answer 1

尝试使用position: fixed;并使用top：和left:值。

编辑：任何元素中的敏感位置均使用%大小；）

例如。

.one {
  position: fixed;
  top: 50%;
  left: 50%;
  background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
    height: 100vh;
}

希望这可以为您提供帮助；）

如何在调整窗口大小时使背景图像响应

1 个答案: