如何使 CSS URL 背景图像显示在 localhost 中？

Posted 2023-02-25

【中文标题】如何使 CSS URL 背景图像显示在 localhost 中？

【英文标题】：How to make CSS URL background images show up in localhost?

【发布时间】：2011-02-20 15:37:59

【问题描述】：

我刚刚安装了 xampp，并将我的一个实时站点带入其中，以便能够从 localhost 开始工作。

所以要查看我的网站，我导航到 localhost/example.com

我在使用 html 时注意到图像存在一些问题，例如：

<img src="/new_pictures/05.jpg" />

图像不会显示，但后来我删除了 / 并且这有效：

<img src="new_pictures/05.jpg" />

我似乎对 CSS 背景图像有类似的问题，但我无法让它工作 - 如果我删除 / 那里，图像不会显示在实时站点上。如何让背景图片显示在 localhost 上？

示例 CSS（适用于实时站点但不适用于本地主机）：

.outeremailcontainer 
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;

谢谢！

【问题讨论】：

试试 background-image:url(/example.com/images/feather_email2.jpg);

【参考方案1】：

样式表中的图片路径应该是图片相对于样式表的位置，例如，如果您的 .css 文件位于您网站上的类似目录中：

/css/styles.css

你的路径应该是这样的（上一个目录，然后进入images）

background-image:url(../images/feather_email2.jpg);

【讨论】：

确实做到了。谢谢！令我感到奇怪的是，该路径在实时站点上运行良好...

@Joel - 我猜您在 localhost 上的站点类似于 localhost/mySite/ 作为根，而不仅仅是 localhost/？这就是原因:)

【参考方案2】：

尝试使用./ 而不是/，并确保您指定了正确的路径。

【参考方案3】：

您可以尝试base 标签（大多数流行浏览器都支持），然后提供与base 标签的href 属性相关的路径。或者确保提供相对于 CSS 样式表的正确路径