Comment placer du texte sur une image en utilisant CSS

Question

Comment placer du texte sur une image en CSS ?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Du texte</h2>
    </div>
</div>

Je veux faire quelque chose comme ci-dessous mais je suis bloqué, voici mon css

<style>
.image {
   position : relative ;
}

h2 {
   position : absolue ;
   haut : 200 px ;
   gauche : 0 ;
   largeur : 100 % ;
   marge : 0 automatique ;
   largeur : 300 px ;
   hauteur : 50px ;
}
</style>

Je n'obtiens aucun résultat de html2pdf lorsque j'utilise une image d'arrière-plan :

Imprimer


≪/pré>
Voici prints.php : 

writeHTML($_SESSION['sess']);
$html2pdf->Sortie('random.pdf');
?>≪/pré>

Answer 1

Voici une autre façon d’utiliser les dimensions réactives. Il gardera votre texte centré et maintiendra sa position dans le parent. Si vous ne souhaitez pas qu'il soit centré, c'est encore plus simple, utilisez simplement absolute 参数即可。请记住，主容器正在使用 display: inline-block. Il existe de nombreuses autres façons d'y parvenir, en fonction de ce avec quoi vous travaillez.

Basé sur centré sur l'inconnu

Voici un exemple de codepen fonctionnel

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

Que diriez-vous de quelque chose comme ça : http://jsfiddle.net/EgLKV/3/< /p>

Fait en plaçant du texte sur l'image en utilisant 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>