<p>如何在 CSS 中将文本置于图像之上？</p> <pre class="brush:php;toolbar:false;">&lt;div class="image"&gt; &lt;img src="sample.png"/&gt; &lt;div class="text"&gt; &lt;h2&gt;Some text&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>我想做类似下面的事情，但我遇到了困难，这是我当前的 css</p> <pre class="brush:php;toolbar:false;">&lt;style&gt; .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } &lt;/style&gt;</pre> <p>当我使用背景图像时，我没有从 html2pdf 获得任何输出：</p> <pre class="brush:php;toolbar:false;">&lt;style&gt; #image_container{ width: 1000px; height: 700px; background-image:url('switch.png'); } &lt;/style&gt; &lt;a href="prints.php"&gt;Print&lt;/a&gt; &lt;?php ob_start(); ?&gt; &lt;div id="image_container"&gt;&lt;/div&gt; &lt;?php $_SESSION['sess'] = ob_get_contents(); ob_flush(); ?&gt;</pre> <p>这是 prints.php：</p> <pre class="brush:php;toolbar:false;">&lt;?php require_once('html2pdf/html2pdf.class.php'); ?&gt; &lt;?php $html2pdf = new HTML2PDF('L', 'A4', 'en'); $html2pdf-&gt;writeHTML($_SESSION['sess']); $html2pdf-&gt;Output('random.pdf'); ?&gt;</pre> <p><br /></p>

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

.containerBox {
   position: relative;
   display: inline-block;
}
.text-box {
   position: absolute;
   height: 100%;
   text-align: center;    
   width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

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