2

したがって、CMS によって生成されるナビゲーション メニューがあります。

ここに画像の説明を入力

メニューの HTML は単純です (わかりやすくするために編集されています)。

 <ul>
     <li><a href="...">Journal</a></li>
     <li><a href="...">Art</a></li>
     <li><a href="...">Work</a></li>
   </ul>

サイトの一般的なテーマに沿って、メニュー項目ごとに個別の PNG ファイルを使用して、項目を手書きのテキストとして表示したいと考えています。

そのために、CSScontentプロパティを次のように使用しました。

#headerNav .nav li a[href="/_site/en/journal/"]  
 { content: url(/path/to/image.png); }

そして、それはうまくいきました！各アイテムの HTML テキストは正しい画像に置き換えられました。

ここに画像の説明を入力

しかし、残念ながら、すべてのブラウザー がとcontent以外のセレクターのプロパティをサポートしているわけではないことを知りました。Chrome と Safari はそれを行いますが、Firefox は行いません。ただし、を使用すると、HTML ノードは置き換えられませんが、画像が追加されます。:before:after :before

ここに画像の説明を入力

これを回避するにはどうすればよいですか?

うまくいかなかったもの：

  • <a>要素を作成するとdisplay: none、パーツも削除さ:beforeれます。
  • <a>要素を作成して別のposition: absolute場所に移動しても機能しません。
  • 追加された画像がドキュメントフローにないため、<a>要素を作成するwidth: 0pxとレイアウトが台無しになります。content

やりたくないこと：

  • もちろん、画像を手動で出力することもできますが、CMS が提供<li>するテキストを含む HTML で作業したいと考えています。

  • 関連するソリューションでbackground-imageは、スタイルシートで各アイテムの幅と高さを指定する必要がありますが、この質問の目的では避けたいと思います。

  • 手書きをフォントに変換することはオプションではありません。

  • JavaScript を使用してその場でアイテムを置き換えることはできません。これは、純粋な HTML と CSS を使用して機能する必要があります。

4

3 に答える 3

5

これをナビゲーションバーで行っているためheight、次のメソッドが機能するように修正する必要があります。

  • 最初に要素contentの上に画像を挿入し、下のタグの実際のテキストをプッシュするようにします。:beforedisplay:blocka

    li a:before {
   content:url(http://design.jchar.com/font/h_1.gif);
   display:block;
}

  • 次に、タグを修正heightしてそのテキストを非表示にします。a

    li a{
   height:50px;
   overflow:hidden;
}

ワーキングデモ

于 2014-01-17T16:04:17.100 に答える
2

OPが行を追加する前に回答がありました

関連する解決策では、スタイル シートでbackground-image各項目を指定する必要がありますwidthがheight、この質問では避けたいと思います。

したがって、background-imageソリューションに関心のある人がこれを参照できる場合は、スキップしてください。

私が提案している最適な解決策がどの程度かはわかりませんが、疑似を使用background-imageして各a要素に使用しnth-、フォントcolorを透明に設定するか、text-indentプロパティを使用することができますoverflow: hidden;

だからそれはのようなものになります

nav ul li {
   display: inline-block;
}

nav ul li:nth-of-type(1) a {
   background-image: url(#);
   display: block;
   width: /* Whatever */ ;
   color: transparent;
   text-indent: -9999px; /* Optional */
   overflow: hidden;
   font-size: 0; /* Optional, some people are really sarcastic for this */

   /* Below properties will be applicable if you are going for sprite methods */
   background-position: /* Depends */ ;
   background-size: /* If required */ ;
}

私があなたをお勧めする理由は次のとおりです:-

利点:

  • クロスブラウザ対応
  • 各タブの画像をリクエストするための HTTP リクエストを削減するメソッドをスプライトできますか
  • また、タグの間にあるテキストを失うことはありませんa。これは、スクリーン リーダーに関する限り非常に優れています。

短所 :

  • widthそれぞれにカスタムを設定

注: スプライト ソリューションを使用する場合background-positionは、プロパティを使用する必要があるため、スプライト メソッドを選択する前に、まずサポート テーブルを確認してください。

ここに画像の説明を入力

クレジット- サポート テーブル用

于 2014-01-17T15:36:02.100 に答える
0

PNG 画像をimgタグに入れ、alt属性を設定します。

<ul>
<li><a href="..." title="Journal"><img src="journal.png" alt="Journal"/></a></li>
<li><a href="..." title="Art"><img src="art.png" alt="Art"/></a></li>
<li><a href="..." title="Work"><img src="work.png" alt="Work"/></a></li>
</ul>
于 2014-01-17T15:51:41.997 に答える