Question

我无法显示背景图片

这是代码

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Visit Jamaica</title>
    <link href="site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

  </body>
</html>

CSS

   html {
    background: url(img/jamaica_background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

图像保存在外部硬盘上 fdrive / UNI / assignment_2 / IMG / jamaica_background.jpg

Answer 1

HTML中的路径相对于正在处理内容的文件。从评论中，听起来你的CSS也在子目录中，所以我在这个假设下继续进行。以此文件结构为例：

/
├index.html
├css
│└site.css
└img
 └jamaica_background.jpg

index.html是您调用css/site.css文件的HTML文件。这使得从site.css文件调用的任何内容都相对于site.css。因此，对img/jamaica_background.jpg的调用实际上是在寻找css/img/jamaica_background.jpg。

使用../在您致电css的{{1}}目录中导航目录。

因此，您的img/jamaica_background.jpg文件应如下所示：

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Visit Jamaica</title> <link href="css/site.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>文件应如下所示：

site.css

Answer 2

 body {
 background: url(http://www.theluxurysignature.com/wp-    content/uploads/
 2015/01
 villa-6-ayara-kamala-phuket-img.jpg)
 no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

这个有效，我在那里选了一个随机的img，这意味着，你的pic路径是错误的。

Answer 3

你走了：

background: url("../img/jamaica_background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

Answer 4

我通过创建与此处提供的相同代码结构进行测试，而不是使用给定路径（fdrive / uni / assignment_2 / img / jamaica_background.jpg），在同一位置创建了一个名为“img”的文件夹在哪里你的HTML，并添加了图像（jamaica_background.jpg）该文件夹，它似乎工作得很好。查看文件夹的结构。

缺少背景图像

4 个答案: