So platzieren Sie Text mithilfe von CSS in einem Bild

Question

Wie platziere ich in CSS Text über einem Bild?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Einige Texte</h2>
    </div>
</div>

Ich möchte so etwas wie das Folgende machen, aber ich stecke nicht fest. Hier ist mein aktuelles CSS

<style>
.Bild {
   Position: relativ;
}

h2 {
   Position: absolut;
   oben: 200px;
   links: 0;
   Breite: 100 %;
   Rand: 0 automatisch;
   Breite: 300px;
   Höhe: 50px;
}
</style>

Ich erhalte keine Ausgabe von html2pdf, wenn ich ein Hintergrundbild verwende:

<style>
#image_container{
    Breite: 1000px;
    Höhe: 700px;
    Hintergrundbild:url('switch.png');
}
</style>
<a href="prints.php">Drucken</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>

Das ist 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

这是使用响应式尺寸的另一种方法。它将保持您的文本居中并保持其在父级中的位置。如果您不希望它居中，那就更简单了，只需使用 absolute 参数即可。请记住，主容器正在使用 display: inline-block。还有许多其他方法可以实现此目的，具体取决于您正在处理的内容。

基于以未知为中心

这里是工作的 codepen 示例

HTML

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

CSS

.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;
}

Answer 2

像这样的怎么样：http://jsfiddle.net/EgLKV/3/< /p>

通过使用 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>