CSS背景图片不会显示短网址

Question

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

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

当我使用长网址（例如

）制作CSS时

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

当我尝试将CS​​S缩短为〜/ images /甚至将CSS和网站文件放在根文件夹中并使用/ images /我什么都没得时

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

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

Answer 1

这可能是因为您没有适当缩短网址。

假设绝对路径为：

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 */

我不知道~前缀网址格式，虽然我怀疑它是ASP或.NET格式？虽然我无法就此提出建议。

可能对您有用的问题：

• How do I turn a relative URL into a full URL?
• Using relative URL in CSS file, what location is it relative to?
• Absolute urls, relative urls, and...?

Answer 2

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

您需要确保浏览器能够“理解”您在CSS文件中使用的URL，因此要么让它们“完全合格”（http://mysite/my_virtual_directory/images/logo.png），要么从“开头”开始（{{1 }}）。