このケースでは、CSS を使用して画像の背景のテキスト コンテンツを非表示にする方法について説明します。まず backgroundbackground を使用して画像を背景表示として設定し、次に text-indentindent を使用してリンク コンテンツを非表示にします。 < a> リンクタグは、テキストへのアンカーテキストリンクを設定します。以下に例を示します。
ケースの説明例
ここでは、CSS DIV ケースの効果を観察するのに便利です。Web サイトのレイアウトを実装してみましょう。
拡張読み取り: html img image
1. CSS コード:
h1#logo{
float:left;width:165px;height:60px;
background:url(//m.sbmmt.com) no-repeat 0 0}
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}
/* css 注: display:block は、#logo 内の A タグをブロック単位で表示し、高さを 100%、100 で表示します。 % width
text-indent この属性は、CSS のインデント スタイルを 9999px に設定します。これにより、a タグ内のテキストが非表示になります。このようにして、h1 タグの背景画像が表示されます。テキストと A アンカーを実現します。
ハイパーリンク2. HTML コード:
<h1 id="logo"> <a href="//m.sbmmt.com/" title="PHP中文网"> </a> </h1>