2

<header>ヘッダーグラフィックが。になるようにスタイル設定されたサイトがありbackground-imageます。ホームページへのヘッダーリンクが欲しいのですが。

これを行うためのエレガントな方法はありますか？これにより、ヘッダーとして保持できますbackground-imageか？

CSS：

#header {
  background-image: url('../images/header.jpg');
  height: 144px;
  display: block;
}
4

4 に答える 4

6

背景画像はリンクできません。これを実行するための「適切な」方法<a>は、適切なを持っている要素を持ちhref、それに置くbackground-imageことです。CSSを使用<a>して、必要なスペースを確保します。

于 2013-03-13T13:39:20.833 に答える
1

あなたの質問は<header>要素に言及していますが、CSSコードはクラスセレクターを使用してい#headerます。技術的には持っている可能性がありますが<header class=header>、それはかなり無意味であり#header、実際のマークアップが持っていることを示唆してい<div class=header>ます。

実際のブラウザの動作を考慮する限り、<header>要素と要素の両方を要素<div>内に配置できます。<a>HTML仕様では、従来、このような構成は許可されていませんでしたが、HTML5 CRでは、内部の「フローコンテンツ」を許可しています<a>。

ヘッダーが実際には（背景画像として）1つの画像である場合、a要素のみを使用して背景画像を直接その上に設定する方が自然に見えるでしょう。ただし、これによりアクセシビリティが低下します。背景画像の代替テキストを指定する方法がないため、スクリーンリーダーや画像の読み込みが無効になっているブラウザでは、コンテンツやリンクテキストのないリンクが作成されます。したがって、ヘッダーをリンクにする必要がある場合は、コンテンツ画像を使用することをお勧めします。

<header>
<a href="./"><img src=hdr.png alt="ACME Company" border=0></a>
</header>

（ただし、コンテンツイメージは、最小ページ幅をイメージの幅に強制します。これは常に望ましいとは限りませんが、それは別の話であり、別の質問です。）

于 2013-03-13T14:40:05.573 に答える
0

アンカーはHTML5のブロック要素になっているため、、、などのブロック要素をラップできh1ます。ただし、、、、などをラップすることを意図したものではありません。pdivheaderarticlenavsection

onClickマークアップまたはCSSにアクセスできない場合は、JavaScriptを使用してヘッダー要素にイベントを割り当てることができますが、それが機能するにはもちろんJavaScriptが必要です。

代わりに、の内容をでラップして、ホームページに割り当てる必要がheaderありますa。次に、背景画像やその他のCSSをhref使用してリンクのスタイルを設定できます（必ずに設定してください）。display: block

于 2013-03-13T13:47:03.383 に答える
0

別のスタイルシートを使用する場合は、このようにします。

元のcssヘッダータグ

    <div id="header">

    </div>

ヘッダーをリンクにするスパンを追加

    <span><a href="http://www.yourwebsitename.com/">
    <div id="header">

    </div></a></span>
于 2014-03-05T17:21:47.107 に答える