CSSを使用して画像上にテキストを配置する方法
P粉696605833
2023-08-23 17:18:53
<p>CSS で画像の上にテキストを配置するにはどうすればよいですか? </p>
<pre class="brush:php;toolbar:false;"><div class="image">
<img src="サンプル.png"/>
<div class="テキスト">
<h2>テキスト</h2>
</div>
</div></pre>
<p>以下のようなことをしたいのですが、行き詰まっています。これが私の現在のCSSです</p>
<pre class="brush:php;toolbar:false;"><style>
。画像 {
位置: 相対的;
}
h2 {
位置: 絶対;
上: 200ピクセル;
左: 0;
幅: 100%;
マージン: 0 自動;
幅: 300ピクセル;
高さ: 50ピクセル;
}
</style></pre>
<p>背景画像を使用すると、html2pdf から何も出力されません: </p>
<pre class="brush:php;toolbar:false;"><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();
?></pre>
<p>これは prints.php です: </p>
<pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = 新しい HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは、レスポンシブ ディメンションを使用する別の方法です。テキストが中央に配置され、親内での位置が維持されます。中央に配置したくない場合は、
absoluteパラメータを使用するだけでさらに簡単です。メインコンテナがdisplay: inline-blockを使用していることに注意してください。作業内容に応じて、これを達成する方法は他にもたくさんあります。ベース不明中心
これが実際に動作するコードペンの例です
HTML
リーリーCSS
リーリー次のようなものはどうでしょうか: http://jsfiddle.net/EgLKV/3/
position:absoluteとz-indexを使用して画像上にテキストを配置することで完了します。