Question

有两个div类：bar嵌套menu

background-image放置在bar课程时未正确缩放或响应，并且放置在menu课程中时不会出现，因为它似乎适合反应风格。< / p>

此外，图像是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文件。因此，如果您说，样式表位于css文件夹旁边的img文件夹中，您只需设置相对于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。

Answer 2

将此链接用于响应式背景图片。

http://css-tricks.com/perfect-full-page-background-image/

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

2 个答案: