有办法为css中使用的图像设置默认目录吗？

Question

我有一个 css 文件，出于组织目的，该文件位于图像所在的另一个目录中。问题是我总是最终像这样设置所有背景图像：

background-image: url(../img/Untitled.jpg)

。 有类似 HTML 的

<base>

标签之类的东西可以在 css 中使用，所以我不需要将“

../img/

”添加到每个

background-image

？

Answer 1

另一个可能的选项是使用php或其他服务器端语言创建css样式。然后，您可以使用目录变量来输出每个项目的完整路径。

---

styles.php

<?php
    header("Content-Type: text/css");
    $imageDir='../images';
    // or
    // $imageDir='/newsletter/2010/jan/17/business/category/7/img';
?>

.divClass{
    background : url('<?php echo $imageDir; ?>/kitten.jpg');
}

Answer 2

不，恐怕你会被这种语法所困扰。

编辑：您可能想查看http://lesscss.org/。使用变量，您至少可以在顶部定义所有网址。

Answer 3

URL 重写是你的朋友。

CSS 图像引用始终与 CSS 文件的 URL 相关。假设我们的 CSS 文件位于

/css

内，并且我们希望图像资源位于

/img

内，并且我们厌倦了必须将

../img/

放在每个图像引用前面。

所有相对 CSS 图像引用都是相对于包含该引用的 css 文件的 URL 而言的。设置 URL 重写规则来重写像这样的 url

• /css/foobar.png

• /css/blue-theme/header-background.png

所以它们是相对于所需位置的（

/img

）：

• /img/foobar.png

• /img/blue-theme/header-background.png

瞧瞧！问题解决了。

您可以使用 Apache 的 mod_rewrite 来完成此类操作。应该像将以下内容添加到适当的

.htaccess

一样简单。

Options +FollowSymlinks
RewriteEngine On
RewriteRule ^css/(([^/]+/)*)([^/\.]+\.(gif|jpg|jpeg|png))$ img/$1$3

在 IIS 上更困难，但概念保持不变。

Answer 4

没有真正的解决方案，除非 css 与图像位于同一目录中。

但正如您在问题中所说，情况并非如此，因此显示图像位置的唯一方法是给出每个

background-image

或静态图像（带有

http://...

）的相对位置

Answer 5

您可以做的一件事是，您始终可以从域根目录下来，而不是使用相对路径向上移动。这个 URL 看起来更像

url(/img/Untitled.jpg)

，并且在所有 CSS 文件中都是相同的，无论它们在域下嵌套的深度如何。

Answer 6

您可以在页面加载后替换“路径”...

超时是人为的，只是为了在行动中显示它

https://jsfiddle.net/z52v76e9/2/

document.addEventListener("DOMContentLoaded", function() {
    document.body.innerHTML = document.body.innerHTML.replaceAll("/old/", "/new/");
});