html - 如何使用 CSS 设置响应式背景图像

Question

有两个 div 类:一个嵌套 menu 的 bar

background-image 放置在 bar 类中时未正确缩放或响应，并且放置在 menu 中时未显示类，它似乎适合响应式样式。

此外，图像是 png，但在空白空间中呈现为空白……为什么会这样？

现在将两者作为内联样式进行测试，但是，在嵌套在“css”文件夹中的外部样式表中，如何将图像指向与“css”文件夹路径相邻的“img”文件夹中？

对于响应能力......背景图像应根据浏览器的高度/宽度进行缩放..

当前的 CSS:

.bar {
  position: static;
  bottom: 0;
  height: 10%;
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.menu {
  display: inline-block;
  background-image: url("img/menu-bar.png");
}

Answer 1

您在这里问了几个问题。所以，按顺序:

默认情况下，background-image 将以其实际大小重复。如果你想让它缩放，你应该设置 background-size 并且可能禁用 background-repeat。要使图像缩放到容器的大小，您可以设置 background-size: 100% 100%; 或者您可以使用 background-size: cover 来填充较小尺寸的容器并剪掉其余部分。另一种选择是使用 background-size: contain 来避免剪裁图像。

至于路径问题，路径总是相对于CSS文件的。因此，如您所说，如果样式表位于与 img 文件夹相邻的 css 文件夹中，您只需设置相对于 css 文件夹。

你最终的 CSS 可能看起来像这样:

.menu {
  display: inline-block;
  background-image: url(../img/menu-bar.png);
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
}

请注意，我删除了引号，因为它们不是必需的。

最后，如果您的透明度不起作用，那么一定是图像文件本身有问题。 CSS 与 PNG 透明度无关。确保您的图形编辑器以适当的透明度保存 PNG。