使用CSS閱讀指向頁面徽標的鏈接

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的標誌是，在這個答案的時候，裏面的鏈接a的一個background-image元素本身的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"; 
}