ホームページ  >  記事  >  ウェブフロントエンド  >  背景画像とリンクの書き方(背景画像+リンク)_HTML/Xhtml_Webページ制作

背景画像とリンクの書き方(背景画像+リンク)_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:37:561716ブラウズ

写真を背景としてリンクを記載しております。たとえば、Web サイトのロゴ画像などです。例: Potato のロゴ画像

http://www.jb51.net">Tudou

a {display: block;width: 170px;height: 42px;text-indent: -9999px;background: url(/skin/__g/img/ui/nav/v2_v6.png) 0 0 no-repeat;}

z インデントのため、Tudou.com という文字は表示されません。 title 属性は、マウスをポイントしたときに表示されるテキストです。
リンクの背景画像は、 がインライン要素であり、a タグ CSS の width height 属性が無効であるため、通常の状況では完全に表示されません。

改善方法はCSSでdisplay:block;またはdisplay:inline-block;を使用して幅と高さを設定することです。