html - 背景画像: URL が機能しない

Question

background-image:url を介してリンクに背景画像を追加しようとしています

  <a href="#" style="width:300px; height:125px; background-image:url('http://dev.nclexreview.net/media/3549/livereviewsignin.png')"></a>

インライン CSS と外部 CSS を試しました。

div では完全に機能しますが、a では機能しません。

background:url も使用してみましたが、それもうまくいきませんでした。これはスプライト画像で、マウスオーバーで位置を変えたいのですが、そもそも画像すら出てきません。

私は本当にいくつかの助けをいただければ幸いです:)

Answer 1

「a」タグはインライン要素です。表示タイプをブロックに変更してください。

http://jsfiddle.net/qWW68/

<a href="#" style="display:block;width:300px; height:125px; background-image:url('http://dev.nclexreview.net/media/3549/livereviewsignin.png')"></a>

これはスプライトであるため、疑似クラス スタイルを追加するために、これを外部スタイルシートに移動する必要があります。

Answer 2

とにかくスタイルをシートに入れる必要があります。一般的な背景で a 要素のスタイルを設定してから、a:hover で background-position を使用するだけです。