CSS：background-images base

Question

是否可以在CSS中输入基本标记/声明，就像在HTML中一样？ 我需要一个，因为我使用mod_rewrite和url看起来像这样︰domain.com/path/to/something/

所以我的背景图片不加载正确（只是索引/主页）。我能想到的只是添加整个域（我每次更新web空间中的CSS都必须更改），但我不想这样做。

Answer 1

如果将CSS放入样式表中，则路径相对于样式表文件的位置，而不是相对于页面。

例如，如果你有/css/global.css样式表，并在/images/logo.gif的图像，你会从页面引用样式表是这样的：

<link rel="stylesheet" type="text/css" href="/css/global.css" /> 

（请注意，您使用的路径相对于。根，所以也无所谓被用来请求页面的网址是什么）

在样式表中，你会使用这样的形象：

#Logo { background: url(../images/logo.gif); } 

Answer 2

如果可以的话，你应该锚你的网址，使他们成为root relative：

例如改变：

background-image: url(images/image.png); 

要这样：

background-image: url(/images/image.png); 

其次，即使你的CSS是设置作为一个纯粹的相对路径，它相对于CSS文件而不是页面（除非您将CSS嵌入到页面中）。

Answer 3

建立一个结构是这样的：

/index.html 
/img 
    /image1.png 
    /image2.png 
/css 
    /styles.css 

把你所有的CSS规则到外部styles.css的样式表。

现在，CSS中，你的形象引用是相对于样式表的位置- 这样你就可以使用相对URL像background-image: url(../img/image1.png);

最后，请确保您的HTML代码，您使用的绝对URL链接你的样式 - 样：

<link type="text/css" rel="stylesheet" href="/css/styles.css" /> 

使用相对URL中的CSS意味着你可以自由样式表和背景图片移动到不同的文件夹 - 甚至是不同的域或服务器 - 而绝对URL /css/styles.css在你的H TML LINK标签不会受到mod_rewrite或其他任何影响您网页在服务器上的明显位置的影响。

Answer 4

的CSS是在一个文件中，看上去例如像这样：

.ui-widget-content { background: black url(images/content.png) repeat-x; } 

结构：

domain.com/folderone/ 
domain.com/folderone/style/ 
domain.com/folderone/style/css/ 
domain.com/folderone/style/css/general.css 

而且对萤火虫一看说，这是试图加载来自：

http://domain.com/style/css/images/content.png