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

Question

如何在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>当我使用背景图像时，我无法从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');?>

Answer 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>

Answer 2

为什么不设置sample.png作为背景图像text或h2CSS类？这将产生效果，就像你在图像上写的一样。