HTML和CSS背景-图像未显示

ukdjmx9f 于 2023-04-08 发布在其他

关注(0)|答案(6)|浏览(128)

我已经仔细检查了我的URL和文件名，但是我似乎不能让图像显示出来。为什么会这样？这是我的代码（注意<p>在body标签中，我没有添加完整的代码，我只添加了头部和特定的问题）。

<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;
}

css

来源：https://stackoverflow.com/questions/8838847/html-and-css-background-image-is-not-showing-up

6条答案

按热度按时间

icomxhvb1#

试试这个：

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

如果没有../，它会在你的样式表文件夹中寻找一个不存在的images文件夹，所以你必须回到images文件夹所在的目录。

编辑：您也可以像这样缩短CSS样式：

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

赞(0）回复(0）举报 2023-04-08

wj8zmpe12#

此时浏览器将在样式表目录中搜索图像。
也许值得一试

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

到

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

这可能是问题的原因。

赞(0）回复(0）举报 2023-04-08

gwo2fgha3#

我有这个同样的问题解决了它添加/到图像的网址开始
（例如：background-image：url（/images/background.gif）;）
希望这对你有帮助：）

赞(0）回复(0）举报 2023-04-08

l3zydbqr4#

我知道这个答案有点晚，但这个链接会给予你一个关于css文件路径的详细解释。

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

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

赞(0）回复(0）举报 2023-04-08

yduiuuwa5#

FYI这个页面只是帮助我找到了解决我的问题的方法，我在Chrome浏览器中查看html页面，main.css没有加载背景图像，原因是，因为main.css中的“相对链接”在开头有一个/，正如上面有人所说，它会转到根文件夹，在我的Windows操作系统中当然是C：，但在服务器上，它是该网站的根文件夹，它确实有效！所以我不得不删除/images/backgroundimage. jpg链接开头的初始/，然后它在Windows上工作。现在让我们看看它是否在我的服务器上没有斜线工作... YUP！
所以不管有没有/在这个服务器上我的css中的/images/backgroundimage. jpg的开头，它都能工作，但是在Windows上，/将它带到根c：\驱动器。顺便说一句，我在浏览器中使用了“inspect”和底部的“Console”来查看它正在寻找的链接C：\images...，然后发现这个页面有这个答案，开头/将它带到ROOT文件夹。

赞(0）回复(0）举报 2023-04-08

e0uiprwp6#

可能你在图像路径中使用了反斜杠（\）而不是正斜杠（/）。
我犯了这个错误，正在和我的Chrome浏览器作斗争。我从Windows资源管理器（使用反斜杠）复制了图像路径

赞(0）回复(0）举报 2023-04-08