Question

因此。我去W3Schools尝试获得一些帮助，但我不知道为什么我的背景图像不会显示...

<body>
  <style>
    body {
      background-image: url(../Payday%202/download%20(2).jpg); --Image
      background-repeat: no-repeat; --No Repeat
      background-color: #000000 --When image ends, blackness!
    }
  </style>
--Code here--
</body>

我不确定它是否需要进入头部，因为当我尝试时，这也不起作用。有什么帮助吗？

Answer 1

首先，我认为样式块应该进入head标记，同时确保您引用的图像实际存在于该URL。您也可以尝试将url用引号括起来，如url（＆＃34; path to imag＆＃34;）;我也希望带有 - 前缀的单词不是你真实代码的一部分

Answer 2

添加完整文件名并且没有空格

<body>
  <style>
    body {
      background-image: url(http://localhost/site/images/fullfilepath.jpg); --Image
      background-repeat: no-repeat; --No Repeat
      background-color: #000000 --When image ends, blackness!
    }
  </style>
--Code here--
</body>

Answer 3

是的，样式通常应该在Head标签中。

<head>
  <style>
    body {
      background-image: url("../Payday%202/download%20(2).jpg"); --Image
      background-repeat: no-repeat; --No Repeat
      background-color: #000000; --When image ends, blackness!
    }
  </style>
</head>
<body>
--Code here--
</body>

如果你制作一个你在HTML中引用的外部样式表，那就更好了。

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
--Code here--
</body>

在style.css中（与HTML文件在同一目录中），您可以放置

body {
      background-image: url("../Payday%202/download%20(2).jpg"); --Image
      background-repeat: no-repeat; --No Repeat
      background-color: #000000; --When image ends, blackness!
}

您还需要确保您的图片位于您指定的位置，如果资源不在其中，则不会显示。另一个提示是将您的文件和目录命名为没有特殊字符（如空格和括号）。制作你的目录../Payday02/download2.jpg比../Payday％202 /下载％20（2）.jpg更安全。

Answer 4

这应该解决你的问题，正确的是页面开头的css样式标签

<html>
<head>
  <style>
    body {
      background-image: url(../Payday%202/download%20(2).jpg); --Image
      background-repeat: no-repeat; --No Repeat
      background-color: #000000 --When image ends, blackness!
    }

  </style>
</head>
<body>
--Code here--
</body>
</html>

头部或身体的背景图像？

4 个答案: