Comment faire pour placer du texte sur une image en css

Comment puis-je centre un texte sur une image en css?

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

Je veux faire quelque chose comme celui-ci, mais je vais avoir des difficultés, voici mon css

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

Comment faire pour placer du texte sur une image en css

Quand j'utilise l'image de fond d'écran je ne suis pas sortie de 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();
?>

Voici prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
  • il est possibl le faire avec une image de fond ?
InformationsquelleAutor Wern Ancheta | 2012-01-03
  1. 170

    Comment quelque chose comme cela: http://jsfiddle.net/EgLKV/3/

    De son fait en utilisant position:absolute et z-index pour placer le texte sur l'image.

    CSS:

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

    HTML:

    <div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

    • Vous pourriez éviter le z-index
    • ce post ne fonctionne plus ?
    • Il fonctionnait bien jusqu'à ce que vous avez modifié la réponse. J'ai roulé en arrière vos modifications.
    • haah-- me remercier, je viens de vous rappeler pour fixer des choses --il ne fonctionnait pas hier - vene le texte hello world
    • Comment pourriez-vous obtenir le texte au milieu de l'image? De gauche à 200, en bas de 200?
    • Oui, il suffit de jouer avec la gauche et le bas des valeurs pour déplacer le texte autour
    • Malheureusement, cela finit par être une très mauvaise option si vous souhaitez que votre site pour suivre moderne, réactive pratiques que vous êtes la fixation de la taille du contenant (la réponse a été de 2012, de sorte que son évidemment hors de date). Une bien meilleure solution peut être trouvée ici: stackoverflow.com/questions/43333495/text-over-image-responsive

    InformationsquelleAutor xbonez
  2. 28

    C'est une autre méthode pour travailler avec les Réactifs tailles. Il gardera votre texte centré et de maintenir sa position au sein de son parent. Si vous ne voulez pas qu'il soit centré alors c'est encore plus facile, il suffit de travailler avec les absolute paramètres. Gardez à l'esprit le conteneur principal est l'aide de display: inline-block. Il ya beaucoup d'autres façons de le faire, en fonction de ce que vous travaillez sur.

    Basé sur Le centrage de l'Inconnu

    Travail codepen exemple ici

    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;
}
    • Cette solution est idéal pour les moments que vous ne pouvez pas spécifier de régler la hauteur ou la largeur.
    InformationsquelleAutor Ghost Echo
  3. 7

    Pourquoi ne pas mettre en sample.png comme image d'arrière-plan de text ou h2 classe css? Cela donnera effet comme vous l'avez écrit sur une image.

    • Que faire si l'image doit être d'une sémantique de la partie du document?
    • Je ne pense pas que ce soit le cas ici. :\
    • Je suis l'aide de html2pdf pour générer un fichier pdf à partir d'elle et si j'utilise l'image de fond d'écran je ne suis pas d'obtenir quoi que ce soit.
    • alors vous devez changer la question du titre de contenir-vous d'utiliser html2pdf.
    InformationsquelleAutor Harry Joy
  4. 6

    Pour un responsive design, il est bon d'utiliser un récipient ayant une relative mise en page et le contenu (le placer dans un conteneur) d'avoir à disposition fixe comme.

    Styles CSS:

    /*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

    Code HTML: 

    <!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

    Pour IONIQUE de la Grille de mise en page, régulièrement espacés éléments de la grille et les classes utilisées en HTML ci-dessus, veuillez vous reporter Grille: Colonnes Espacées Uniformément. Espérons qu'il vous aide... 🙂

    InformationsquelleAutor Kailas
  5. 4

    comme Harry Joie souligne, définir l'image comme la div à l'arrière-plan, puis, si vous avez seulement une ligne de texte, vous pouvez définir la hauteur de la ligne du texte qui doit être le même que le div de la hauteur et cela permettra de placer votre texte dans le centre de la div.

    Si vous avez plus d'une ligne, vous aurez envie de régler l'affichage à table-cell et verticale-l'alignement du milieu.

    • Je suis l'aide de html2pdf pour créer un fichier pdf à partir de ceux-ci. Je ne vois aucune image si j'utilise une image de fond d'écran. Veuillez voir mon edit.
    • Je suis désolé, je n'ai aucune idée de ce que html2pdf est.
    InformationsquelleAutor Genia S.
  6. 1

    à compter de 2017 c'est plus souple et a travaillé pour moi.
    C'est pour mettre du texte à l'intérieur de vs plus, comme un badge.
    au lieu du numéro 8, j'ai eu une variable d'extraire des données à partir d'une base de données.

    ce code a commencé avec Kailas's réponse jusqu'au-dessus de

    https://jsfiddle.net/jim54729/memmu2wb/3/

    Mon HTML

    <div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

    et mon css:

    .containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}
    InformationsquelleAutor Jim Schwetz
  7. -1

    Une petite et courte façon de faire la même

    HTML

    <div class="image">
     <p>
        <h3>Heading 3</h3>
        <h5>Heading 5</h5>
     </p>
</div>

    CSS 

    .image {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 300px;
        color: white;
        background: url('../../Images/myImg.jpg') no-repeat;
        background-size: 250px 250px;
    }
    InformationsquelleAutor Co. Aden