css - 画像の上に書く

Question

Web サイトに画像があり、それを印刷するオプションを追加したいと考えています。だから私はそれを行う方法を見つけましたが、「画像を印刷」という言葉を画像の上、左下端に配置したいと考えています。

文を追加するにはどうすればよいですか?

ありがとうございます。

これは画像で、左下端のテキストは「印刷画像」を意味します。

Answer 1

<div style="position:relative">
<img src="image.gif" alt="preview" />
<div style="position:absolute; left:0px; bottom:0px; cursor:pointer" onclick="...">Print Image</div>
</div>

Answer 2

画像の左下に配置されるテキスト オーバーレイを作成したいと考えています。この目的を達成するために、位置が絶対に設定された div にラップされているスパンインライン要素でテキストをラップできます。好みに合わせて top と left のプロパティを設定します。サンプル コードは次のようになります。

<div id="content">
<div><img src="image.jpg" /></div>
<div style="position: absolute; left: 10px; top: 100px;"> <!-- Change these parameters to reflect proper placement depending on the size of your image -->
<span>Print Image</span>
</div>
</div>

もちろん、css ファイルでスタイリングを実装することもできます。これが役に立つことを願っています。