为全屏宽度 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>