web-dev-qa-db-ja.com

CSSスタイルシートの画像へのリンクを追加する

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

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

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

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

csshyperlinkstylesheet
6
Marc L

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

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 [〜＃〜]を気にしない場合は、他の答えを選択するのが良いでしょう。

13
Andrea Turri

スタイルシートにリンクを追加しません。それらはページのスタイルを記述するためのものです。画像がクリックされたときに移動するには、マークアップを変更するかJavaScriptを追加します。

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

<a href="home.com" id="logo"></a>
1
Schleis

次のようなことができます

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

hTMLで

1
Saryk

私はこの同じ質問を熟考しているこの古いリストにつまずいた。この同じ質問に対する私の支援は、ヘッダーテキストをリンクにすることでした。次に、色を変更し、CSSでテキスト装飾を削除しました。ヘッダー画像全体をリンクにするために、アンカータグのパディングをヘッダー画像のエッジに近づくまで拡張しました。これで満足のいく結果が得られ、共有できると思いました。

0
Lars