0

画像の上にテキストを配置する良い方法が思いつきません。これが私がやりたいことです：

これは私が持っているものです。左側の黄色のナビゲーション サイン (ホーム、お問い合わせ、会社概要などの通常のナビゲーションなど) の上にテキストを配置したいのですが、それを行う良い方法が思いつきません。実際の記号を絶対位置に置いたのと同じようにやってみましたが、うまくいきませんでした。また、ページ中央の青いバーの上にテキストを配置する予定ですが、それも同じ方法で行います。

文字自体が次のページへのリンクである必要はありませんが、テキストをその上に置いたときにそれが起こるのであれば、そうです.

4

4 に答える 4

3

背景の一部として画像を組み込むことができます。私はこれにかなり慣れていないため、知識が限られていますが、これらすべての画像を単一の「背景画像」CSS 属性に追加するのが最善の策かもしれません。

于 2012-04-05T23:44:42.230 に答える
2

画像がある場所で右にスパンを使用し、上と左の絶対位置として設定して、正しい場所に配置します。以下は、ポールの支柱の上部を試して、中央にテキスト テストを取得する例です。

<a href="index.html">
 <img src="images/rightArrow.png" id="img2">
 <span style="position:absolute;left:95px;top:33px">test</span>
</a>
于 2012-04-05T23:50:59.623 に答える
1

このようなものはどうですか？http://jsfiddle.net/UMtXy/1/

各要素を個別に配置したり、ホバー スタイルを追加したり、背景を変更したりできます。</p>

HTML

(DIV を使用するよりも意味論的)

<nav>
   <ul>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li><a href="#">Links can go here too</a></li>
   </ul>
</nav>

CSS

NAV LI{
    background-image:url(http://people.eecs.ku.edu/~ageoffri/unavitSite/images/rightArrow.png);    
    background-repeat: no-repeat;
    background-position: top left;
    width: 200px;
    height: 40px;
    padding: 12px 32px;
    font: 12px/12px arial, sans-serif;
}

NAV LI:hover {
    color: red;
}

</p>

于 2012-04-05T23:53:58.267 に答える