画像の表示中に CSS を使用して HTML 内のテキストを効果的に非表示にするにはどうすればよいですか?

CSS を使用してテキストを非表示にする

HTML では、CSS を使用してタグのスタイルを設定し、テキストを画像に置き換えることができます。ただし、元のテキストは、タグに割り当てられたスペース内に表示されたままになる可能性があります。

これに対処するための 1 つのテクニックは、テキストを画面外に押し出すことです。これは、次の CSS プロパティで実現できます:

text-indent: -9999px;

これにより、テキストが左に遠くに送信され、非表示になります。さらに、画像を表示するには、background-image プロパティを設定し、その URL を指定します。画像を収容できるように要素の高さと幅を定義することを忘れないでください。

background-image: url(/the_img.png);
height: 100px;
width: 600px;

別の方法は、画面外に大きなスペースができるのを避けながらテキストを非表示にすることです。

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

text-indent を 100% に設定すると、テキストは効果的にその幅だけ右にシフトされ、非表示になります。 White-space: nowrap はテキストが次の行に折り返されるのを防ぎ、overflow: hidden は余分なコンテンツをクリップします。

以上が画像の表示中に CSS を使用して HTML 内のテキストを効果的に非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。