使用CSS读取到页面徽标的链接

Question

我已经安装了Social Fixer插件来修补Facebook的CSS。我一直在做一个体面的工作，并玩弄它的整体外观，除了一个小细节一直困扰着我

我已经决定把Facebook的logo改成我在网上找到并修改过的gif了。这一改变没有任何问题，只是点击标志不再带你回到Facebook主页。

我所做的修改如下:

#pageLogo
{
content:  url('http://i.imgur.com/hrsJAJh.gif');
height: 82%; 
width: auto;
position: relative;
left: -35px;
}

我试过用background-image: url(...);，但它只是把我的新标志放在Facebook的官方标志后面。我意识到使用content: url(...);也在改变(即删除)主页的锚:

<h1 id="pageLogo">
    <a data-gt="{"chrome_nav_item":"logo_chrome"}" href="https://www.facebook.com/?ref=logo">Facebook</a>
</h1>

我已经尝试改变锚本身的内容，以添加链接到主页:

#pageLogo a 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:link 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:visited 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:active 
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:hover
{
background-color: transparent;
content: url('http://www.facebook.com/');
}

但是它不起作用，我猜这是因为我正在改变锚的内容(即"Facebook"文本)，而不是该锚的实际"href"。

我在这里找过有类似问题的人，大多数答案都说修改HTML或使用Javascript代替。使用Social Fixer，我只能修改CSS。

我已经检查了w3的属性为"href"one_answers"data-gt"以防万一，但没有运气。

只是重申所有这些文本之后，我想改变Facebook的标志，同时保持链接到Facebook主页只使用CSS。

Answer 1

Facebook logo是，在这个答案的时候，h1#pageLogo里面的a链接的background-image，而不是元素本身的背景。这就是为什么您尝试更改background-image会导致徽标后面出现图像的原因。

您想要更改链接的background-image。比如:

#pageLogo a {
  background-image: url('http://i.imgur.com/hrsJAJh.gif');
  background-position: top left; /* probably */
  height: "your image height";
  width: "your image width";
}