有时我喜欢尝试对网站进行“逆向工程”，尤其是那些看起来很复杂的网站。我觉得这样做会帮助我学习其他开发人员使用的技术。
最近想看看英雄联盟网站。我尝试的第一件事是查看他们如何放置网站的头像/导航图像。我使用 firefox，所以我使用了“右键单击 -> 检查”功能。在这样做的过程中，我发现了这一点
<html>..........
<body class="not-front not-logged-in page-node node-type-lc-article no-sidebars i18n-en pvpnetbar">
<style> … </style>
<div id="lol-header" class="i18n-en" role="banner">
<div class="section clearfix">
<div id="lol-header-sitename">
<a id="site-name" class="hidden-text" alt="Home" rel="home" title="Home" href="http://na.leagueoflegends.com/"> … </a>
</div>
......</html>
具有 CSS Url 属性的 div 是 'lol-header'，它的值为
url("../img/lol-header-sprite.png")
我知道任何时候您在正斜杠前看到两个点都表示您转到父目录。现在，我可以查看 url 是否为“http://na.leagueoflegends.com/learn/new_user_guide”，然后相对 url 应为 http://na.leagueoflegends.com/img/lol-header-sprite.png“……但这不起作用。此外，如果您在主页上，它具有相同的相对 URL。
怎么可能呢？我以为我对网络编码很了解，但我有点迷路了:-\
最佳答案
您所指的页面会像这样加载 CSS 文件:
@import url('/sites/default/files/lol_global_elements/css/lol_global_elements.css');
CSS 规则本身是:
background: transparent url(../img/lol-header-sprite.png) 50% 0px no-repeat;
../ 表示相对于加载文件的路径上升一级。因此，以第一个 URL 开头，它将以:
http://na.leagueoflegends.com/sites/default/files/lol_global_elements/
然后它添加 img/lol-header-sprite.png 给你:
http://na.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png
关于网站上的 CSS Url 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17092016/