时间戳

首页 > 解决方案 > 为全屏宽度 div 响应定位和缩放背景图像

css - 为全屏宽度 div 响应定位和缩放背景图像

问题描述

这是我所拥有的： 尺寸为 1920*1920 像素的 SVG（https://signtalkindia.s3.ap-south-1.amazonaws.com/assets/windbg.svg）

这是我需要的：

  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，但我认为这不重要。

标签： cssreactjssvgbackground-image

解决方案

几个错误：

  • 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>

推荐阅读