43

Webサイトのロゴを表示するための次の要素があるとします。

<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

#web-titleでスタイル設定background:url(http://website.com/logohere.png)されますが、テキストを適切に非表示にするにはどうすればよいWebsite Nameですか？ここに見られるように：cssまたはここhttps://stackoverflow.com/a/2705328を使用してテキストを非表示にします、私は次のようなテキストを非表示にするさまざまな方法を見てきました：

#web-title span { text-indent: -9999px; }

また

#web-title span { font-size: -9999px; }

また

#web-title span { position: absolute; top: -9999px; left: -9999px; }

また、これら3つの方法を組み合わせたものもあります。しかし、実際には、テキストを効果的に非表示にするためのベストプラクティスはどれですか？

4

12 に答える 12

80

実は最近、新しい技術が出てきました。この記事はあなたの質問に答えます: http://www.zeldman.com/2012/03/01/replaceing-the-9999px-hack-new-image-replacement

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

アクセス可能で、-99999px よりも優れたパフォーマンスを発揮します。

更新: @deathlock がコメント欄で言及しているように、上記の修正の作成者 ( Scott Kellum ) は透明フォントの使用を提案しています: http://scottkellum.com/2013/10/25/the-new-kellum-method .html .

于 2012-10-08T14:12:44.387 に答える
19

単純に透明にすることができます

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}
于 2015-02-01T17:38:36.907 に答える
6

display: none;このように単純に使用できませんか

HTML

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

CSS

.webname {
   display: none;
}

または、スペースを確保することが心配な場合は、可視性で遊んでみてください。

.webname {
   visibility: hidden;
}
于 2012-10-08T14:10:51.083 に答える
3

ほとんどの開発者が行う方法は次のとおりです。

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

.webname {
   display: none;
}

あなたがデバイスのコンテンツを隠していることに気付くまで、私もそうしていました。別名スクリーンリーダーなど。

したがって、渡すことによって：

#web-title span {text-indent: -9000em;}

テキストがまだ読めることを確認します。

于 2012-10-08T14:49:50.137 に答える
2

テキストを持つスパンに . hide-text クラスを追加します

.hide-text{
display:none;
 }

またはテキストを透明にする

.hide-text{
 color:rgba(0,0,0,0);
 }

ユースケースに合わせてご利用ください。

于 2016-06-27T06:59:23.367 に答える
0

私はこのようにします：

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}
于 2016-07-22T19:06:15.087 に答える
0

2015 年 9 月現在、最も一般的な方法は次の CSS を使用することです。

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
于 2015-09-24T15:09:14.273 に答える
0

別の方法

position: absolute;
top: 0px;
left: -5000px;
于 2020-11-13T04:34:38.850 に答える
0

マークアップでこれに対応する意思がある場合 (テキストを保持する質問があるため)、CSS ヘルパーで jQuery UI が使用したものは何でも使用します。

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

画像のコンテナー内でテキストを非表示にするために余分なマークアップを追加することを絶対に拒否する場合は、画像を置き換える手法が適しています。

于 2012-10-08T14:32:10.337 に答える
-2

これは古い質問だと思いますが、Bootstrap フレームワークには、スクリーン リーダー以外のすべてのテキストを非表示にするクラス (sr のみ) が組み込まれています。

<a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>
于 2014-06-17T16:03:56.337 に答える