8

CSSスタイルシートに画像へのリンクを追加して、画像が押されたときにリンクに移動できるようにしたいと考えています。

画像自体のコードは次のとおりです。

 #logo{
    background-image: url(images/logo.png);
    width: 981px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;

ハイパーリンクに移動できるようにするために追加するコードは何ですか？例： http：//home.comに移動したい場合

4

4 に答える 4

17

それをしてはいけない...

cssを介して、URLあなたが置くのbackground-imageは画像のためだけです。

経由して、次の方法でハイパーリンクHTMLのを追加する必要があります。href

<a href="http://home.com" id="logo">Your logo</a>

とtext-indent他のいくつかcssを使用すると、画像だけを表示するように要素を調整し、それをクリックするとリンクに移動します。

編集：

私は再びあなたに見せて、私の解決策がはるかに優れている理由を説明するためにここにいます：

<a href="http://home.com" id="logo">Your logo name</a>

リンク内にテキストがあるため、このブロックHTMLはSEOに適しています。

cssでスタイルを設定する方法：

#logo {
  background-image: url(images/logo.png);
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 981px;
  height: 180px;
}

次に、 SEOを気にしない場合は、他の答えを選択してください。

于 2013-02-06T13:42:34.040 に答える
2

スタイルシートへのリンクは追加しません。ページのスタイルを説明するためのものです。マークアップを変更するか、JavaScriptを追加して、画像がクリックされたときにナビゲートします。

あなたのスタイルだけに基づいて：

<a href="home.com" id="logo"></a>
于 2013-02-06T13:42:59.563 に答える
1

あなたは次のようなことをすることができます

<a href="http://home.com"><img src="images/logo.png" alt="" id="logo"></a>

HTMLで

于 2016-06-15T13:48:44.837 に答える
0

私はこの同じ質問を熟考しているこの古いリストに出くわしました。これと同じ質問に対する私のバンドエイドは、ヘッダーテキストをリンクにすることでした。次に、色を変更し、CSSでテキストの装飾を削除しました。ヘッダー画像全体をリンクにするために、アンカータグのパディングをヘッダー画像の端に近づくまで拡張しました。これは満足のいく結果であり、共有することにしました。

于 2015-12-06T00:46:21.957 に答える