CSS:background-images base

时间:2009-12-07 21:29:15

标签: css

是否可以在CSS中输入基本标签/声明,就像在HTML中一样? 我需要一个,因为我使用mod_rewrite,网址看起来像:domain.com/path/to/something /

所以我的背景图片没有正确加载(只是索引/主页)。我能想到的是添加整个域(每次我在网站空间更新CSS时都要更改)但我不想这样做。

4 个答案:

答案 0 :(得分:0)

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

例如,如果您的样式表位于/css/global.css,图片位于/images/logo.gif,则可以从页面中引用样式表,如下所示:

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

(请注意,您使用相对于根的路径,因此使用哪个URL来请求页面并不重要。)

在样式表中,您将使用如下图像:

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

答案 1 :(得分:0)

设置类似的结构:

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

将所有CSS规则移动到外部styles.css样式表中。

现在,在CSS中,您的图片引用是相对于样式表的位置 - 因此您可以使用background-image: url(../img/image1.png);等相对网址

最后,请确保在HTML代码中使用绝对网址链接样式表,例如:

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

在CSS中使用相对网址意味着您可以自由地将样式表和背景图片移动到不同的文件夹中 - 甚至移动到不同的域或服务器 - 而HTML LINK标记中的绝对网址/css/styles.css赢得了'受mod_rewrite或影响您网页在服务器上的明显位置的任何其他因素的影响。

答案 2 :(得分:-1)

如果可以,您应该锚定您的网址,使其成为root relative

例如,改变:

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

对此:

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

其次,即使您的CSS设置为纯粹的相对路径,它也是相对于CSS文件而不是页面(除非您在页面中嵌入CSS)。

答案 3 :(得分:-1)

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

看看Firebug说它正试图加载:

  

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