為全屏寬度 div 響應定位和縮放背景圖像

Question

這是我所擁有的：尺寸為 1920*1920 像素的 SVG （ https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg28858EB98DF48EAF7 ）

這是我需要的：

1. 我將把它用作背景圖像，讓 div 占據整個屏幕的寬度。
2. div 的這個背景圖像需要響應。
3. 必須讓背景的頂部在所有屏幕尺寸下都可見，即背景圖像應從圖像頂部開始。
4. 不應重復。

（這個想法是展示海洋的背景，如上圖所示設計和鏈接。）

這是我嘗試過的：

 body { padding: 20px; } div{ height: 1000px; background: url(https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg) bottom top; background-size: 150%; background-repeat: none; }

 <div> </div>

“我需要什么”部分中提到了許多未遵守的規則。 必須比我想象的要簡單，但如果有人可以提供幫助，我會很高興。 我正在使用 React，但我認為這不重要。

Answer 1

幾個錯誤：

• bottom和top相互湮滅，因為它等於垂直軸的 100% 和 0% ..水平軸未定義背景簡寫在這里無效，甚至不會顯示背景圖像。

• background-size: 100% auto ，只設置水平尺寸就足夠了。

我相信您嘗試做的演示：

 body { padding: 20px; } div{ height: 1000px; background: url(https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg) top center; background-size: 100% auto; background-repeat: no-repeat; }

 <div> </div>