CSSを使用して画像上にテキストを配置する方法

Question

CSS で画像の上にテキストを配置するにはどうすればよいですか?

<div class="image">
    <img src="サンプル.png"/>
    <div class="テキスト">
       <h2>テキスト</h2>
    </div>
</div>

以下のようなことをしたいのですが、行き詰まっています。これが私の現在のCSSです

<style>
。画像 {
   位置: 相対的;
}

h2 {
   位置: 絶対;
   上: 200ピクセル;
   左: 0;
   幅: 100%;
   マージン: 0 自動;
   幅: 300ピクセル;
   高さ: 50ピクセル;
}
</style>

背景画像を使用すると、html2pdf から何も出力されません:

<style>
#イメージコンテナ{
    幅: 1000ピクセル;
    高さ: 700ピクセル;
    背景画像:url('switch.png');
}
</スタイル>
<a href="prints.php">印刷</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>

これは prints.php です:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = 新しい HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

Answer 1

これは、レスポンシブ ディメンションを使用する別の方法です。テキストが中央に配置され、親内での位置が維持されます。中央に配置したくない場合は、absolute パラメータを使用するだけでさらに簡単です。メインコンテナが display: inline-block を使用していることに注意してください。作業内容に応じて、これを達成する方法は他にもたくさんあります。

ベース不明中心

これが実際に動作するコードペンの例です

HTML

リーリー

CSS

リーリー

Answer 2

次のようなものはどうでしょうか: http://jsfiddle.net/EgLKV/3/< /p>

position:absolute と z-index を使用して画像上にテキストを配置することで完了します。

リーリー リーリー