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

Answer 2

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