css - CSS background-image 不会显示短 URL

Question

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

我试图让我的标题的背景图像在标题 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')

Answer 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 表单？虽然我无法就此提供建议。

可能对您有用的问题：

• 如何将相对 URL 转换为完整 URL？
• 在 CSS 文件中使用相对 URL，它相对于什么位置？
• 绝对网址、相对网址和...？

Answer 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）开始。