有两个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");
}
答案 0 :(得分:3)
你在这里问几个问题。所以,按顺序:
默认情况下,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。
答案 1 :(得分:0)
将此链接用于响应式背景图片。