CSSでHREFの背景イメージを実装する

私はHTMLでhrefを持っており、私はそれをサーバから動的に作り出しています。私は背景として使用したい、つまりgif画像上にテキストを（白で）置き、それをまだリンク可能にしたい、素敵な丸みを帯びたコーナーgif画像を設計しました。CSSでHREFの背景イメージを実装する

現在のHTMLは次のようになります。

<h2> 
    <!--img src="images/greenback.gif"--> 
    <a id="site-title0" class="titletext" href="#"> 
    Alligator Creek, Bowling Green Bay National Park 
    </a> 
</h2> 
<div id="descrip0" class='description'> 
    20km S of Townsville. $4.85/night. Gates close...

CSSでこれを行うための最善の方法は何ですか？私は、相対位置を使ってテキストを背景画像上に移動することができますが、初期の実験では、これがページ上の残りのフローに影響します。

または、おそらくCSSの背景画像を使用するのが最善の方法ですか？提案wisdom'-」

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */ 
        background: #fff url(path/to/image.gif) top left no-repeat; 
        text-align: center; 
        line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */

私も - そして、これは単に個人的な習慣、気取りかもしれだろうと受け取ら：

出典

2009-06-25 timbo

わかりませんが、コードとして表示するコードブロックを編集する必要があるかもしれません（コードを選択して[101010]ボタンをクリックしてください）。それがあなたのサイトでどのようにレンダリングされるかを表示しようとしていない限り？ –

サンプルHTMLが役立つでしょう。 – razzed

へのリンクを設定する必要があります.gifではなく.pngを使用してください。しかし、注目されるように、それはおそらく個人的で主観的なものです。

回答はtimboさんのコメントに対して回答しました。

はまた、これは特にきれいではない、コードのデモはここにあります：http://davidrhysthomas.co.uk/so/a-img-bg.html

出典

2009-06-25 15:32:01

素晴らしい感謝！どのようにGIFにテストの中心を置くかについてのヒント？左上揃えです... – timbo

更新されたコードサンプルを参照してください。 –

あなたはダニエルが言うように、本当に、display: block

出典

2009-06-25 15:26:26

表示する：a上のブロックまたはH2に背景画像を添付します。いずれにしても、白いテキストを使用している場合は、aまたはh2に背景色を設定してください。 CSSをオンにして画像をオフにしている人がいる場合、あなたのリンクは見えません。あなたはあなたの丸い角の画像の角をページのbgの色に塗りつぶす必要があるかもしれないことを意味します。

出典

2009-06-25 20:03:35

CSSでHREFの背景イメージを実装する

答えて

関連する問題