HTML和CSS背景图片无法显示

Question

HTML和CSS背景图片无法显示

12

我已经仔细检查了我的网址和文件名称，但似乎无法显示图像。为什么会这样？这是我的代码（请注意<p>在标记内，我只添加了和特定问题的部分代码）。

<html>
  <head>
     <title>Head First Lounge.</title>
      <link type="text/css" 
            rel="stylesheet" 
            href="stylesheet/style.css" 
            media="screen"/>
  </head>


<p class = "guarantee">
     Our guarantee: at the lounge, we're committed to providing you, 
     our guest, with an exceptional experience every time you visit.
     Whether you're just stopping by to check in on email over an 
     elixir, or are here for an out-of-the-ordinary dinner, you'll 
     find our knowledgeable service staff pay attention to every detail. 
     If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>

这是该部分的CSS规则

.guarantee{         
        background-image: url(images/background.gif);
        font-family: "Geogia", "Times New Roman", Times, serif;
        border-color: black;
        border-width: 1px;
        border-style: solid;
        background-color: #a7cece;
            padding: 25px;
            margin: 30px;
            line-height: 1.9em;
            font-style: italic;
            color: #444;
}

- user962206

图片的URL是什么？/images/background.gif还是/stylesheet/images/background.gif。 - KingCronus

它位于image/background.gif。那是主HTML页面。 - user962206

1

更改 background-image: url(../images/background.gif) - Zoltan Toth

6个回答

2

浏览器目前正在样式表目录中搜索图像。

尝试更改可能值得一试。

background-image: url(images/background.gif);

为了

background-image: url(/images/background.gif);

可能是问题的原因。

- KingCronus

0

我知道这个答案有点晚了，但是这个链接会给你提供关于CSS文件路径的详细解释。

/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards

https://css-tricks.com/quick-reminder-about-file-paths/

- Emc_tgn15

0

我曾经遇到过同样的问题，通过在图片URL的开头添加 / 来解决它。

（例如：background-image: url(/images/background.gif);）

希望这可以帮到你 :)

- Seth

0

顺便说一下，这个页面帮助我解决了我的问题，我在Chrome浏览器中查看HTML页面时，主CSS没有加载背景图像的问题，原因是因为main.css中的“相对链接”以/开头，在Windows操作系统上当然是C：，但在服务器上，它是该网站的根目录，可以正常工作！所以我必须删除/images/backgroundimage.jpg链接开头的斜杠，并且它可以在Windows上工作。现在让我们看看在没有那个斜杠的情况下它是否在我的服务器上工作...没错！

所以，在此服务器上，无论是否在/css中的/images/backgroundimage.jpg开头处有'/'，都可以正常工作，但在Windows上，'/'将其定位到根c:\驱动器。顺便说一句，我使用浏览器中的“检查”和底部的“控制台”来查看它所寻找的链接C：\images...，然后找到了这个具有答案的页面，开始的'/'将其带到根目录。

- Harley Borgais

-1

也许你在图像路径中使用了反斜杠（\）而不是正斜杠（/）。

我犯了这个错误，一直在与我的 Chrome 浏览器作斗争。我从 Windows Explorer 中复制了图像路径（它使用反斜杠）。

- Sai Dubbaka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew · Accepted Answer

尝试这个：

background-image: url(../images/background.gif);

如果没有 ../ ，它会在你的样式表文件夹中查找一个不存在的图像文件夹。因此，您必须返回到包含图像文件夹的目录。

编辑: 您还可以像这样简化CSS样式：

.guarantee{
    background: #a7cece url(../images/background.gif);
    border: 1px solid black;
}