时间戳

首页 > 解决方案 > 如何使 CSS 背景响应特定尺寸

html - 如何使 CSS 背景响应特定尺寸

问题描述

我正在创建一个网站，我正在尝试向页面添加一个背景图像，该图像覆盖整个页面并且具有响应性，但我很难这样做。每当我调整宽度和高度以匹配整个主页时，我显然发现当我将页面移动到另一台显示器或缩小窗口时尺寸不会缩放。但是，我需要调整宽度和高度以使图像覆盖页面。有没有办法让图像响应并根据自己的喜好调整尺寸？

#background-image-container {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
<div id="background-image-container">
  <img src="static/images/waco-siege2.jpg" id="background-image" style="opacity: 0.7; display: block;" width="1370" height="665">
</div>

我意识到我的代码是一团糟，有些部分可能与其他部分相矛盾；但这只是显示了我目前尝试的所有内容。

标签： htmlcss

解决方案

您对您尝试做的事情的标记在我看来是错误的。您需要在容器元素上设置背景，而不是将图像放在其中。

<div id="background-image-container" style="background-image:url(static/images/waco-siege2.jpg)"></div>

我也认为你会想要使用 background-size:cover 而不是包含。

您也可以将图像宽度和高度设置为 100%，但如果更改纵横比，则会扭曲图像。

推荐阅读