Question

我正在尝试将一个简单的背景图像放到我正在处理的页面上，而我似乎无法让CSS工作。

html, body {
  background: url("../assets/images/bgart.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

这没什么，没有图像。我已经尝试了所有可能的url（路径）和许多其他的东西，但我不得不诉诸：

body background="assets/images/bgart.jpg">

在主.html文件中，它有点正确。我希望将它应用于html标签以覆盖所有空间，但这不起作用。

有什么想法吗？

Answer 1

如果你的文件夹结构是这样的：

assets
  -- css
  -- js
  -- images
index.html

然后你引用了错误的路径。假设您的style.css或任何样式文件被调用在css文件夹中，正确的路径应如下所示：

html, body {
  background: url("../images/bgart.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

如果您使用几乎所有主要浏览器已经集成的开发人员工具，或者如果您使用Mozilla Firefox（就像您应该使用lol），这个错误IMO至少很容易解决，您可以尝试Firebug Inspector它拥有所有它需要调试你的问题。

Answer 2

背景图片的CSS很好，但URL可能不是。要查看CSS是否正常工作，您可以使用来自网络的图像

html, body {
    background: url("https://commons.wikimedia.org/wiki/File%3AThe_Earth_seen_from_Apollo_17.jpg") no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

图像的真实路径来自CSS所在的位置。让我们假设你的文件夹结构像

/website
--- index.html
--- /css
--- --- style.css
--- /images
--- --- background.jpg

在这个结构中你可以将index.css链接到index.html中，但是你的background.jpg路径是（＆＃34; ./ images / background.jpg＆＃34;），其中点带你去一个目录回来了。

如果你在index.html中有CSS，那么路径将只是（＆＃34; images / background.jpg＆＃34;），因为你已经在根目录中启动了。

CSS背景属性似乎对我没有任何帮助

2 个答案: