Overlay Text On ImageButton

画像の上にテキストを表示する簡単な方法を知っている人はいますか？Overlay Text On ImageButton

<img id='img1' src='myimage.jpg'> 
<div style='position:relative; top:-30px'> MY TEXT TO DISPLAY ON IMAGE</div>

これは、本部とその内容の全てが30ピクセルを上に移動するようになります：私が見つけた一つの解決策は、単に次のことを行うことです。問題は私が自分のイメージの高さを知らないことです。しかし、私は幅を知っています。また、私のページにはテキストが重なっている必要がある多くの動的イメージが存在する可能性があり、サーバー上の実行時にイメージの絶対位置を必ずしも知る必要はありません。

私はフルイメージを表示することができなかったので、イメージをバックグラウンドイメージにすることで多くの成功を収めていませんでした。ご提案がありましたら、さらに詳しい情報が必要な場合はお知らせください。

PS：私は、javascript/JQueryのようなクライアント側のソリューションを公開しています。

出典

2009-03-05 jakejgordon

ずつを見つけたさてあなたは私の答えから見ることができるように、私が終わるありませんでした決して仮定して（これより古いポストは誰が答えを探して助けることが考え答えを見つける必要があります。質問を終わらせるためのエチケットは何ですか？ – jakejgordon

これはどうですか？

<div style="position: relative;"> 
    <img src="..." /> 
    <div style="position: absolute; top:0; left:0">!!! TEXT HERE !!!</div> 
</div>

出典

2009-03-05 13:11:15 palig

これは、画像のサイズがわからない場合（元のポスターと同じ）、優れた答えです。 – Traingamer

Traingamerありがとう、誰かが本当に元の質問を読むことを知ってよかった。背景画像は良い解決策ですが、画像のサイズを知る必要があります。そして、あなたがそれを知っていれば、その余裕のあるソリューションを使うこともできますか？ :) – palig

確かに、フィードバックに感謝します。私は自分のイメージの高さを知らないので、これは一貫して機能しません。 – jakejgordon

jQueryを使用すると、dimensions plug-inを使用してイメージのサイズを取得できます。その後、divのスタイルを簡単に変更できます。

出典

2009-03-05 13:05:06 kgiannakakis

背景画像がこれに最適です。以下のようなSomethign

<style> 
.thing { 
    background-image: url(myimage.jpg); 
    background-repeat: no-repeat; 
    padding: 10px;; 
</style> 


<div class="thing">My Text</div>

出典

2009-03-05 13:16:40 user73993

DIVの寸法を背景画像の寸法に明示的に設定してください。 –

フィードバックいただきありがとうございます。私は自分のイメージの高さを知らないので、10pxがイメージの75％、イメージの2％かもしれないので、これは一貫して動作しません。その場合、テキストが悪く見えます。 – jakejgordon

背景画像は最高ではありません - 特に場合には、我々は正確にも、ページの他の部分を知らない - それは、彼らがどのように使用するかを伝えるのは難しいです。

背景画像では、画像のサイズを確認できません！それを忘れないでください。あなたはそれが背景画像で作業したい場合は

出典

2009-03-05 13:31:45 palig

、これを試してみてください。

.btn {position: relative; background-image: url('yourimagehere.png'); width: 100px; height: 20px;} 
    .btn span {position: absolute; top:0; left:0; width: 100px; height: 20px; } 

    <div class="btn"> 
     <a href="#">My Text<span/></a> 
    </div>

注意、あなたは、CSSでのボタンの適切な幅と高さを設定する必要があります。

出典

2009-03-05 13:46:45

ありがとうございました。問題（他の回答へのコメントで言及されているように）は、私が画像の高さを知らないということです - したがって、これはうまくいかないでしょう。 – jakejgordon

私は興味がある特定のケースでは、すべての画像が実際に同じ高さになることを実感した後、これを回避することができました。それが事実であるので、次のマークアップは私のためにうまく働いた：

<head> 
<style type="text/css"> 
    .myClass { 
    text-align:center; 
    margin-top:-35px; /*set this to the distance from the bottom*/ 
    font-weight:bold; 
    font-size:18px; 
    color:#fff; 
    background-color:#111; 
    width:160px; 
    } 
</style> 
</head> 
<body> 
<img src='My Fixed Size Image' /> 
<div class='myClass' runat='server'>MY TEXT HERE</div> 
</body>

出典

2009-03-05 23:03:10 jakejgordon

は、なぜ、それ自体でdivを使わないのでしょうか？

<div style="display:inline;background:url('img.png');width:128px;height:128px;">text here</div>

出典

2009-03-14 04:29:01 unrelativity

あなたの解決策は、私が固定幅と高さを持っていると仮定できるようになったので、おそらくうまくいくでしょう。私の元の質問は私のイメージの高さを知らなかったので、それを許可していないだろう。 – jakejgordon

私はあなたが今:) Text on an Image button in c# asp.net 3.5

出典

2011-07-20 19:17:10 daq

Overlay Text On ImageButton

答えて

関連する問題