Question

我正在尝试在我的文件中设置背景属性，但图像未加载

HTML代码：

<html>
  <head>
  <link rel="stylesheet" type="text/css" href=".\css\recipe.css">
</head>
<body>
  <div class="container">
    <div class="div1">
      <div class="div1a"></div>
      <div class="div1b"></div>
    </div>
    <div class="div2"></div>
   <div class="div3"></div>
   <div class="div4"></div>
 </div>
 </body>
</html>

css代码：

.div1b{
    border-style:solid;
    height:28em;
    width:71em;
    background: url('C:\Users\Lakha\Documents\My Web Sites\Food 
    website\img\banner.jpg');

}

我尝试了以下步骤：

- ＆GT;检查图像是否在正确的文件夹中。 - ＆GT;尝试使用双引号而不是单引号

Answer 1

如果图片在您的网站上，似乎就是这种情况，您必须提供一个相对网址，而不是绝对网址，因为您的硬盘无法通过互联网访问（感谢上帝...）。该URL使用/字符格式化为单独的文件夹，而在Windows中没有\。

所以网址会是这样的：

url(img/banner.jpg)

假设＆＃34;食品网站＆＃34;文件夹是您网站的根目录，而css直接在其中。

Answer 2

您必须在href="correct css file path"中检查您的css文件路径。

<link rel="stylesheet" type="text/css" href="../css/recipe.css">

你可能弄错了。

Answer 3

不要使用绝对路径。尝试使用相对于css文件位置的位置。像这样：

background: url('..\img\banner.jpg');

Answer 4

您可以将图片插入您的网络文件夹

.div1b{
    border-style:solid;
    height:28em;
    width:71em;
    background: url('../img/banner.jpg');

}

css中的背景图像属性不起作用

4 个答案: