ホームページ > 記事 > ウェブフロントエンド > CSSを使用して画像の背景のテキストコンテンツを非表示にする方法

CSSを使用して画像の背景のテキストコンテンツを非表示にする方法

php中世界最好的语言オリジナル: 2017-11-28 10:40:544462ブラウズ

このケースでは、CSS を使用して画像の背景のテキストコンテンツを非表示にする方法について説明します。まず backgroundbackground を使用して画像を背景表示として設定し、次に text-indentindent を使用してリンクコンテンツを非表示にします。 553a280de7202c0dce8dfe871821475e リンクタグは、テキストへのアンカーテキストリンクを設定します。以下に例を示します。

ケースの説明例

ここでは、CSS DIV ケースの効果を観察するのに便利です。Web サイトのレイアウトを実装してみましょう。

拡張読み取り: html img image

1. CSS コード:

h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.php.cn) 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="http://www.php.cn/" title="PHP中文网"> 
</a> 
</h1>

49d7977a9a638075f3d1413c95820262 ケース効果

結果はブラウザに表示されます。サンプルコードに従って DIV+CSS の実践を考えて完了し、ブラウザでテストできます。

重要な説明: 本来、HTML では h1 タグ内にテキスト内容が設定されていますが、「text-indent:-9999px」スタイルを設定すると、実質的にテキストが 9999px 左に移動します。当然、通常の解像度のディスプレイでは 9999px は表示されません。エッジコンテンツの場合は、当然ながらこの CSS テクニックを使用してテキストを非表示にし、同時に背景画像を通常どおり表示します。

概要

画像を

CSS背景

として使用し、その上にテキストを配置し、テキストを非表示にします。これはSEOにとってより実用的です。ただし、実際の操作では、オブジェクトの DIV ボックスを設定するときは、画像のサイズ、高さ、幅に注意し、CSS の背景スタイル、テキストインデント、CSS 表示などのスタイルワードを使用してください。それを達成するために。事例や複数の事例をもとに実践的に学ぶことができます。画像上のテキストを隠すために A アンカーテキストを使用したくない場合は、a タグを spam タグ、div タグ、または em タグに置き換えることができ、同じ効果があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。