1

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

我已经到了决定将 Facebook 徽标更改为我上网并修改的 gif 的地步。除了单击徽标不再带您返回 Facebook 主页外，更改没有问题。

我所做的更改如下：

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

我试过使用background-image: url(...);，但它只是把我的新标志放在 Facebook 的官方标志后面。我意识到 usingcontent: 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”和“data-gt”属性，但没有运气。

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

4

1 回答 1

0

在给出这个答案时，Facebook 徽标是background-image内a链接的a ，h1#pageLogo而不是元素本身的背景。这就是为什么您尝试更改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";
}
于 2013-04-27T22:03:34.530 回答