Question

我安装了the Social Fixer plug-in来修补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官方徽标后面。我意识到使用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”和“data-gt”属性，但没有运气。

在所有这些文字之后重申一下，我想改变Facebook的标识，同时仅使用CSS保持与Facebook主页的链接。

Answer 1

在此回答时，Facebook徽标是background-image内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";
}

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

1 个答案: