CSS background-image 不会与短 URL 一起显示答案

【问题标题】：CSS background-image won't show with short URLCSS background-image 不会与短 URL 一起显示
【发布时间】：2011-04-23 20:59:08
【问题描述】：

我已完成搜索，但主题没有帮助。

我试图让我的标题的背景图像在标题 div 的 X 轴上重复。

当我使用长 URL 制作 CSS 时，例如

background-image:url('http://site.com/images/logo.png'); 一切正常

当我尝试将 CSS 缩短为 ~/images/ 之类的内容时，甚至在根文件夹中已有 CSS 和站点文件并使用 /images/ 时，我什么也得不到

background-image:url('~/images/logo.png')

background-image:url('/images/logo.png')

【问题讨论】：

/images/ 应该可以工作。您能否在 Firebug 的“网络”选项卡中查看完整请求的最终结果，以及您得到的响应？
这并不重要，但在 IE5 for Mac 中单引号 url() 内的资源路径不起作用。首选的风格是根本不引用它们。

标签： css short-url

【解决方案1】：

这可能是因为您没有适当地缩短 URL。

假设一个绝对路径：

url('www.example.com/images/imageName.png');

相对于根的 URL 是：

url('/images/imageName.png');

相对路径（假设您的 CSS 文件位于 www.example.com/css/cssStylesheet.css 中）将是：

url('../images/imageName.png'); /* parent directory, then the images directory */

~ 前缀的 url 格式对我来说是未知的，但我怀疑它是 ASP 或 .NET 表单？虽然我无法就此提供建议。

可能对您有用的问题：

【讨论】：

【解决方案2】：

包含“~”的 URL 是 ASP.NET 特有的，它在服务器端进行处理并转换为“正确”的 URL，例如 http://mysite/my_virtual_directory/images/logo.png。 Web 浏览器没有任何方法可以做到这一点，因为它们不知道“~”指的是什么。

您需要确保您在 CSS 文件中使用的 URL 可以被浏览器“理解”，因此要么让它们“完全限定”（http://mysite/my_virtual_directory/images/logo.png），要么从“开始”（/my_virtual_directory/images/logo.png）开始。

【讨论】：