如何在調整窗口大小時使背景圖像響應

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;
}

希望這可以幫到你 ;）