当我将 CSS 移动到子文件夹并更改 url 路径时，CSS 背景图像会中断答案

【问题标题】：CSS background images break when I move CSS to subfolder and change url path当我将 CSS 移动到子文件夹并更改 url 路径时，CSS 背景图像会中断
【发布时间】：2012-07-05 21:57:23
【问题描述】：

所以我有两个 css。

style.css
signup.css

我创建了一个名为 css 的文件夹并将 signup.css 放在 css 文件夹中。

signup.css 是 style.css 的副本，只是放在 CSS 文件夹中。

这是包含图片的 css 代码：

#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

当我重新加载网页时，图像坏了，所以我将代码更改为：

#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

但是图像仍然无法加载。如何调整 css 以使图片加载时将 style.css 放置在 css 文件夹下？

回答一个问题：

头
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    标题>
    链接 href="css/signup.css" rel="stylesheet" type="text/css" />
    /head>

【问题讨论】：

您如何链接到 HTML 中的 css 文件以及 images 文件夹的位置？
你试过清除缓存吗？
您说您将signup.css 移动到css 文件夹中，但在您的代码中有style.css - 您是否编辑了错误的文件？
@ZoltanToth 很好，但这只是从错误的 html 复制和粘贴的错误，请参阅编辑
css url 是相对于样式表文件，而不是文档

标签： css

【解决方案1】：

在您的 HTML 中设置basehref 标签head：

<base href="http://example.org/image_base_path/" />

所有没有协议的请求都将获得这个 URL 前缀。

background:url(images/header_bg.gif) 将被加载为http://example.org/image_base_path/images/header_bg.gif

【讨论】：

【解决方案2】：

我不确定我是否完全遵循您的更改，但是我假设您从以下内容开始：

（HTML）：

<head>
...
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
...
</head>

文件和目录：

index.html
style.css
images/
images/header_bg.gif

它工作正常。那么如果你添加了以下目录和文件：

css/
css/signup.css

并将 HTML head 更改为：

<link rel="stylesheet" type="text/css" href="css/signup.css" media="screen" />

在css/signup.css 你改变了

background: url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

到：

background: url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

并且所有文件都是世界可读的（或网络服务器用户可读），那么你的东西应该可以正常工作。确保您的 css 目录是全球可执行的，并且 css 文件是全球可读的。您可以通过直接在浏览器中打开来验证您的css文件是否可读，即：

http://www.mysite.com/css/signup.css

如果您收到 404 错误，则 Web 服务器无法读取 css 文件。

如果您愿意，也可以在您的 css 文件中使用绝对路径来指向图像，例如：

background: url(/images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

（假设images 文件夹位于您网站的根文件夹中）。

【讨论】：

嗨，JJ，感谢您的提示，但所有 CSS 项目都是可读的，字体更改在那里，div 容器在那里，只是图像中断

【解决方案3】：

尝试使用

background:url(/images/header_bg.gif)

假设您的图像文件夹相对于您的域的路径是 /images

【讨论】：