1

Facebook の CSS をいじるために、Social Fixer プラグインをインストールしました。私はまともな仕事をして、私を悩ませてきた小さな細部を除いて、全体的な外観をいじっています

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/');
}

しかし、それは機能しません。それは、アンカーの実際の「href」ではなく、アンカーのコンテンツ (つまり、「Facebook」テキスト) を変更しているためだと推測しています。

同様の問題を抱えている人をここで探しましたが、ほとんどの回答は HTML を変更するか、代わりに Javascript を使用するように言われました。Social Fixer では、CSS の変更しかできません。

念のため、「href」と「data-gt」の属性について w3 をチェックしましたが、うまくいきませんでした。

繰り返しになりますが、Facebook のロゴを変更したいのですが、Facebook のホームページへのリンクは CSS のみを使用します。

4

1 に答える 1

0

Facebook のロゴは、この回答の時点では、要素自体の背景ではなく、内background-imageのaリンクのです。これが、 を変更しようとした結果、ロゴの後ろに画像が表示された理由です。h1#pageLogobackground-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 に答える