链接背景图像相对于样式表

Question

我正在编写这个Wordpress网站http://searchanddevelop.ca/adv/，我在其中有一个样式表，我经常在其中引用外部背景图像。

我不想硬链接这些图像，但是当我使用相对链接时，Wordpress永久链接结构会破坏所有内容，因为它嵌入目录内的内页（或伪目录，我猜）。

点击我引用的网址中的页面，您就会明白我的意思。

.area-heading {
    background: url('../../../images/titlechevron.png') no-repeat left;
    margin: 2px 0 11px 2px;
    height: 16px;
    }

另外，如果我将相对于域根的内容链接起来，那么当我将网站从测试目录/ adv /移动到其自己的域时，我希望所有背景图像都会中断。

在这里相对链接我的图片的最佳方式是什么？我觉得我错过了一个核心概念。

Answer 1

使用WordPress，保持图像完好无损的最简单方法是将它们放入主题文件夹 - （你的style.css文件所在的位置） - 然后，无论你在哪里安装网站，图像都将是在相对于style.css文件的相同位置。

通常，我创建一个名为“images”的文件夹并将其放入我的主题文件夹中。然后链接到图像，我将能够使用（在样式表中）url（'images / photo.jpg'）等。

主题文件将包含主题所需的所有内容以正确显示 - 所有样式，图像和＆amp;主题文件在一起。

Answer 2

在外部样式表中，所有相对URL都应该与CSS文档相关。

/styles/screen.css
/images/foo.png

如果screen.css想要使用foo.png作为背景图像，它将被引用如下：

.foo {
    background: url(../images/foo.png);
}

当您使用相对URL时，如果不修改这些文件中的路径，则无法随意移动CSS文件。

听起来您需要一个测试环境，其资产结构与您的实时网站的结构相同。可以通过在桌面计算机上设置Web服务器来创建这样的环境（我个人使用在我的桌面上为我的Web服务器运行unix的虚拟机），但这超出了这个问题的范围。在“test”目录中设置指向资产的符号链接也可以。