如何使用css将文本放置在图像上

问题描述

如何在CSS中将文本居中放置在图像上方？

<div class="image">
    <img src="c2FtcGxlLnBuZw=="/>
    <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>

使用背景图像时，未从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');
?>

推荐答案

这样如何：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="aHR0cDovL3d3dy5ub2FvLmVkdS9pbWFnZV9nYWxsZXJ5L2ltYWdlcy9kNC9hbmRyb2EuanBn" />
  <p id="text">
    Hello World!
  </p>
</div>