Come posizionare il testo su un'immagine in css


123

Come centrare un testo su un'immagine in CSS?

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

Voglio fare qualcosa di simile a quello qui sotto ma ho difficoltà, ecco il mio attuale css

<style>
.image {
   position: relative;
}

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

inserisci qui la descrizione dell'immagine

Quando uso l'immagine di sfondo non ottengo alcun output da 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();
?>

Ecco prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

è possibile farlo con un'immagine di sfondo?
Webwoman il

Risposte:


174

Che ne dici di qualcosa del genere: http://jsfiddle.net/EgLKV/3/

È fatto usando position:absolutee z-indexper posizionare il testo sull'immagine.

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


14
Potresti evitare lo z-index
FooBar

8
@danielad: funzionava bene finché non hai modificato la risposta. Ho annullato le tue modifiche.
xbonez

haah - grazie, ti ricordo solo di sistemare le cose - non funzionava ieri - impugna il testo di Hello World
Daniel Adenew

Come hai potuto ottenere il testo al centro dell'immagine? 200 a sinistra, 200 in basso?
Mason H. Hatfield,

4
Purtroppo questa finisce per essere un'opzione davvero pessima se vuoi che il tuo sito segua pratiche moderne e reattive mentre stai aggiustando le dimensioni del contenitore (la risposta era del 2012 quindi è comprensibilmente obsoleta). Una soluzione molto migliore può essere trovato qui: stackoverflow.com/questions/43333495/text-over-image-responsive
Sk446

30

Questo è un altro metodo per lavorare con le dimensioni reattive. Manterrà il tuo testo centrato e manterrà la sua posizione all'interno del suo genitore. Se non vuoi che sia centrato, è ancora più semplice, basta lavorare con i absoluteparametri. Tieni presente che il contenitore principale sta utilizzando display: inline-block. Ci sono molti altri modi per farlo, a seconda di cosa stai lavorando.

Basato su Centering the Unknown

Esempio di codepen funzionante qui

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

6
Questa soluzione è ottima per quelle volte in cui non è possibile specificare un'altezza o una larghezza impostate.
Yazmin

8

Perché non impostare sample.pngcome immagine di sfondo texto h2classe css? Questo darà l'effetto come hai scritto su un'immagine.


2
E se l'immagine dovesse essere una parte semantica del documento?
animuson

@animuson: non credo che questo sia il caso qui. : \
Harry Joy

Sto usando html2pdf per generare un pdf da esso e se uso l'immagine di sfondo non ottengo nulla.
Wern Ancheta

8
@KyokaSuigetsu: allora dovresti cambiare il titolo della domanda per indicare che stai usando html2pdf.
Harry Joy

6

Per un design reattivo è bene utilizzare un contenitore con layout relativo e contenuto (posizionato nel contenitore) con layout fisso come.

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

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

Per il layout della griglia IONIC, gli elementi della griglia con spaziatura uniforme e le classi utilizzate nell'HTML precedente, fare riferimento a - Griglia: colonne con spaziatura uniforme . Spero che ti aiuti ... :)


4

come sottolinea Harry Joy, imposta l'immagine come sfondo del div e poi, se hai solo una riga di testo, puoi impostare l'altezza della riga del testo in modo che sia uguale all'altezza del div e questo posizionerà il tuo testo nel centro del div.

Se hai più di una riga, ti consigliamo di impostare la visualizzazione in modo che sia cella di tabella e allineamento verticale al centro.


Sto usando html2pdf per creare un pdf da quelli. Non vedo alcuna immagine se utilizzo un'immagine di sfondo. Si prega di vedere la mia modifica.
Wern Ancheta

Mi dispiace, non ho idea di cosa sia html2pdf.
Yevgeny Simkin

1

a partire dal 2017 questo è più reattivo e ha funzionato per me. Serve per inserire il testo dentro e sopra, come un badge. invece del numero 8, avevo una variabile per estrarre i dati da un database.

questo codice è iniziato con la risposta di Kailas sopra

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

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

e il mio 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;
}

-1

Un modo piccolo e breve per fare lo stesso

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;
    }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.