<p>如何在 CSS 中將文字置於圖像之上？ </p> <pre class="brush:php;toolbar:false;"><div class="image"> <img src="sample.png"/> <div class="text"> <h2>Some text</h2> </div> </div></pre> <p>我想做類似下面的事情，但我遇到了困難，這是我目前的 css</p> <pre class="brush:php;toolbar:false;"><style> .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } </style></pre> <p>當我使用背景圖片時，我沒有從 html2pdf 獲得任何輸出：</p> <pre class="brush:php;toolbar:false;"><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(); ?></pre> <p>這是 prints.php：</p> <pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); ?> <?php $html2pdf = new HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?></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>