Question

我有时会尝试“反向工程”网站，特别是看起来很复杂的网站。我觉得这样做有助于我学习其他开发人员使用的技术。

我最近想看一下英雄联盟网站。我尝试的第一件事就是看看他们如何放置他们网站的头部/导航图像。我使用firefox所以我使用了“右键单击 - ＆gt;检查”功能。这样做我发现了这个

<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。

怎么会这样？我以为我对网络编码知之甚少，但我有点失落： - \

Answer 1

您所引用的页面会加载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

Answer 2

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

正如您所见，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文件夹的{p> /css为lol_global_elements/img

Answer 3

使用相对于网站的绝对网址：

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

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

Answer 4

试

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

网站上的CSS Url属性？

4 个答案: