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

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

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

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

以下のようなことをしたいのですが、難しいです。現在のCSSは次のとおりです。

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

ここに画像の説明を入力してください

background-image を使用すると、html2pdf からの出力が得られません。

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</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 = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

ベストアンサー1

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

これはposition:absolute、 とを使用してz-index画像の上にテキストを配置することで行われます。

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}
<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

おすすめ記事