3

我有时喜欢尝试“逆向工程”网站，尤其是那些看起来很复杂的网站。我觉得这样做会帮助我学习其他开发人员使用的技术。

我最近想看看英雄联盟网站。我尝试的第一件事是查看他们如何放置网站的头部/导航图像。我使用 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")

我知道，只要您在正斜杠前看到两个点，就意味着您转到父目录。现在，我可以查看网址是否为“ http://na.leagueoflegends.com/learn/new_user_guide ”，那么相对网址应为http://na.leagueoflegends.com/img/lol-header-sprite.png ” ...但这不起作用。此外，如果您在主页上，则它具有相同的相对 URL。

这个怎么可能？我以为我对网络编码了解很多，但我有点迷失了:-\

4

4 回答 4

4

您所指的页面加载 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
于 2013-06-13T16:20:28.383 回答
2

img 位置相对于包含此 div 样式的CSS文件的位置。

如您所见，css文件是：

http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/css/lol_global_elements.css

这意味着，图像在这里：

 http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png

../img/css文件夹是lol_global_elements/img

于 2013-06-13T16:22:29.247 回答
0

使用相对于站点的绝对 URL：

url("/img/lol-header-sprite.png")

始终，它指的是http://na.leagueoflegends.com/img/lol-header-sprite.png.

于 2013-06-13T16:16:50.657 回答
0

尝试

url("/img/lol-header-sprite.png")
于 2013-06-13T16:16:52.380 回答