Question

所以我拥有的是两个css。

的style.css
signup.css

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

signup.css是一个只放在CSS文件夹中的style.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以便使用放在css文件夹下的style.css加载图像？

回答一个问题：

head
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    title>
    link href="css/signup.css" rel="stylesheet" type="text/css" />
    /head>

Answer 1

在HTML basehref中设置head标记：

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

所有没有协议的请求都会获得此网址。

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

Answer 2

尝试使用

background:url(/images/header_bg.gif)

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

Answer 3

我不确定我是否完全遵循了您的更改，但我假设您开始使用此类内容：

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

并且所有文件都是世界可读的（或Web服务器用户可读），那么您应该正常工作。确保您的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文件夹位于您网站的根文件夹中）。

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

3 个答案: