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

Question

我有一个 css 文件，出于组织原因，该文件位于图像所在目录的另一个目录中。问题是我总是最终像这样设置所有背景图像：background-image: url(../img/Untitled.jpg)。 有类似 HTML 的 标记的东西可以在 css 中使用，所以我不需要将“../img/”放入每个 <代码>背景图像？

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 重写规则以重写类似

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

的 URL ，以便它们相对于所需位置(/img):

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

瞧< /em>！问题解决了。

您可以使用 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/");
});

在样式表中替换时，您可以使用 head 而不是 body。