Overlay CSS: come scrivere testo su un'immagine. Immagini nel testo Mostra la descrizione quando passi il mouse sopra l'immagine

Nella pagina web sono presenti tre immagini di carte da gioco (Figura 3.51). Finché sono affiancate, il loro ordine non ha importanza, ma se applichi loro il posizionamento e sposti le immagini in modo che si sovrappongano l'una all'altra, una carta sarà più alta dell'altra (Figura 3.52).

Riso. 3.51. Carte una accanto all'altra

Riso. 3.52. Carte una sopra l'altra

Se immagini una pagina web sotto forma di uno spazio tridimensionale (Fig. 3.53), puoi vedere che le carte si trovano anche lungo l'asse Z. I valori lungo questo asse determinano quale carta è più vicina a noi, che è più lontano, in altre parole, l'ordine in cui si sovrappongono l'uno all'altro. Nel codice documento (Esempio 3.38), l'ordine viene determinato automaticamente in base al flusso del documento. Più basso è l'elemento nel codice, più alto è lungo l'asse Z, quindi l'immagine con l'asso, come quella in basso, si trova sopra le altre carte.

Riso. 3.53. Coordinate immaginarie di una pagina web

Esempio 3.38. Ordine normale della carta

Nei CSS, la posizione dell'asse Z è controllata dalla proprietà z-index, che determina se l'elemento è “più vicino” a noi o “più lontano”. Come valore si prende un numero intero; quanto più è grande, tanto più in alto si trova l'elemento rispetto agli altri. Agli elementi viene assegnato automaticamente un valore pari a 0, quindi anche un indice z pari a 1 farà sì che l'elemento si sovrapponga a tutti quelli sottostanti. Modifichiamo l'esempio 3.38 in modo che l'ordine delle carte venga invertito, e solo modificando lo stile, lasciando invariato il codice HTML.

Carta IMG ( posizione: relativa; ) .tre ( in alto: 50px; sinistra: 55px; z-index: 5; ) .seven ( sinistra: -120px; in alto: 25px; z-index: 2; ) .ace ( sinistra: -295px; indice z: 1; )

La proprietà z-index per la classe tre è specificatamente impostata su 5 per dimostrare che l'ordine dei valori z-index non ha importanza. La cosa principale è che un numero è maggiore dell'altro.

La proprietà z-index funziona solo per elementi il ​​cui valore di posizione è assoluto, fisso o relativo.

Quando vuoi posizionare un elemento sopra tutto il resto della pagina, gli viene assegnato un valore z-index molto alto, come 9999. Ciò garantisce che anche se gli stili utilizzano uno z-index, sarà inferiore al specificato uno. Nell'esempio 3.39, quando passi il mouse sopra le mappe, lo z-index cambia in 10. Qui non sono necessari script, tutto viene fatto tramite la pseudo-classe :hover.

Esempio 3.39. Modifica dello z-index quando si passa con il mouse su una mappa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Tag HTML che determinano l'allineamento e il rientro del testo

Testo giustificato utilizzato in tipografia

L'esempio seguente mostra come allineare testo in larghezza pagine:

allinea="sinistra"	allineare="destra"
	Il numero dei lavoratori impiegati nel settore dei servizi e della diffusione delle informazioni cresce ogni giorno. Se i simboli dei secoli passati erano la fattoria e la fabbrica, il simbolo dell'attuale 21° secolo è un ufficio dotato di computer che hanno accesso al flusso di informazioni.
allineare="giustificare"	allinea="centro"
Il numero dei lavoratori impiegati nel settore dei servizi e della diffusione delle informazioni cresce ogni giorno. Se i simboli dei secoli passati erano la fattoria e la fabbrica, il simbolo dell'attuale 21° secolo è un ufficio dotato di computer che hanno accesso al flusso di informazioni.	Il numero dei lavoratori impiegati nel settore dei servizi e della diffusione delle informazioni cresce ogni giorno. Se i simboli dei secoli passati erano la fattoria e la fabbrica, il simbolo dell'attuale 21° secolo è un ufficio dotato di computer che hanno accesso al flusso di informazioni.

Il valore giustificato garantisce l'uniformità allineare il testo a destra e a sinistra, questo è di larghezza. Questo metodo è ampiamente utilizzato nella stampa.

Allineamento del testo in HTML al centro e alla larghezza

Allinea il testo in HTML centrato, testo a destra:

Risultato:

Attributi e valori

• align="sinistra" - definisce allineamento del testo a sinistra(predefinito).
• allinea="centro" - allinea il testo al centro.
• allinea="destra" - allinea il testo a destra.

Allinea | Rientro del testo HTML

Testo HTML e relativo rientro sul lato sinistro della pagina

Produrremo rientro del testo a sinistra in due modi:

Risultato:

Visualizza in una nuova finestra.

Vedo spesso nei commenti alle lezioni o sui forum quando i principianti chiedono: “Voglio pubblicare testo sopra l'immagine e risulta essere sotto o sopra l'immagine. Aiuto." Vediamo un esempio specifico di come scrivere testo sull'immagine ovunque.

Dobbiamo firmare il suo nome accanto a ciascuna verdura nell'illustrazione qui sotto. Il compito sembra semplice, ma credetemi, può far impazzire qualsiasi webmaster alle prime armi.

Ho volutamente preso come esempio un'immagine grande 1280x733 per mostrare anche come adattarla alle diverse risoluzioni dello schermo. Sono finiti i tempi in cui bastava imparare a impaginare solo per le risoluzioni desktop. Quando crei il layout, dovresti immediatamente occuparti dell'adattabilità.

Markup HTML

Innanzitutto creiamo un contenitore per il quadro vegetale e per le iscrizioni. Tieni presente che inseriamo ciascuna iscrizione in un blocco separato con classi diverse. E questo è logico, poiché tutte le iscrizioni avranno le proprie coordinate sulla pagina e le gestiremo scrivendo le proprietà in divs.

Dopo averlo fatto HTML- markup, vediamo solo un frammento dell'immagine e il testo che appare sotto l'immagine. Un'immagine familiare, non è vero?

L'immagine si è espansa in tutti i suoi pixel piuttosto grandi ed è apparsa una barra di scorrimento orizzontale, ma fortunatamente è facile risolvere questo problema impostando la larghezza dell'immagine al 100%, rendendola quindi adattiva. Almeno un problema è stato risolto.

immagine (
larghezza: 100%;
}

Passiamo ora al testo.

Stili CSS

Negli stili contenitore, la proprietà chiave sarà posizione: relativa. Con questo cambiamo le regole e chiediamo che le coordinate vengano conteggiate non dall'angolo in alto a sinistra della finestra del browser, ma dall'angolo del contenitore, che è il genitore di tutti gli elementi nidificati in esso e occupa il 90% della finestra.

Contenitore (
larghezza: 90%;
posizione: relativa;
allineamento testo: centro;
colore: #000;
famiglia di caratteri: arial black;
dimensione carattere: 250%;
}

Sinistra (
posizione: assoluta;
superiore: 26%;
a sinistra: 6%;
}

Centro (
posizione: assoluta;
superiore: 17%;
a sinistra: 42%;
}

Giusto(
posizione: assoluta;
superiore: 1%;
a destra: 27%;
}

Impostiamo le coordinate non in pixel, ma in %, non a caso; quando le dimensioni dello schermo saranno ridotte, il testo rimarrà nello stesso posto in cui lo abbiamo fissato. Questa è una buona notizia, ma la cattiva notizia è che la dimensione del testo non si riduce insieme all'immagine. L'immagine stessa viene ridotta, ma il testo deve essere ridotto forzatamente.

Domande sui media

Con una risoluzione pari o inferiore a 768 pixel, ridurre la dimensione del carattere al 150%. Come sapevamo che dovevamo ridimensionare a 768 pixel? Attraverso l'ispettore codice, abbiamo visto a che punto il testo salta sugli elementi adiacenti.

Alcune persone trovano la via d'uscita sbagliata: disegnano il testo su un'immagine negli editor grafici e quindi inseriscono l'immagine con il testo nei documenti html. Ma cosa succede se il testo deve essere sostituito? Ridisegnare di nuovo l'immagine? Ci sono soluzioni più semplici.

Di conseguenza otteniamo:

Tutto era coperto di neve bianca: sia gli alberi che le case, un vento alato leggero fischiava: "Ciao, inverno-inverno!"

L'essenza del metodo presentato è creare un contenitore div che conterrà un'immagine e un testo. In questo caso posizioneremo il testo rispetto all'angolo inferiore sinistro del contenitore.

Codice HTML:

codice CSS:

.container ( display:blocco inline; posizione:relativa; ) .container div ( display: blocco inline; posizione: assoluta; fondo: 10px; sinistra: 0px; colore sfondo: rgba(0,0,0,.4 ); imbottitura: 5px 5px 5px 10px; colore: bianco )

• display: inline-block: abbiamo bisogno che il contenitore non si estenda lungo la larghezza dell'intera pagina.
• position: relative - forza tutti i blocchi nidificati con position: Absolute a contare le coordinate della loro posizione non dalla finestra del browser, ma dal block.container

• display: inline-block - in modo che gli stili relativi agli elementi del blocco possano essere applicati al nostro testo.
• posizione: assoluta - per posizionare un blocco utilizzando coordinate specifiche: basso, sinistra - rientri (coordinate) inferiore e sinistro è possibile utilizzare superiore e destro al loro posto

Mostra la descrizione quando passi il mouse sopra l'immagine

Il metodo mostrato sopra può essere utilizzato per visualizzare il testo quando si passa il mouse sopra un'immagine (può essere utile per descrivere i prodotti in un negozio online).

Ogni giorno sui forum html, i neofiti chiedono: "Come mettere il testo sopra un'immagine?" Alcune persone trovano la via d'uscita sbagliata: disegnano il testo su un'immagine negli editor grafici e quindi inseriscono l'immagine con il testo nei documenti html. Ma cosa succede se il testo deve essere sostituito? Ridisegnare di nuovo l'immagine? Ci sono soluzioni più semplici.

Utilizzando i metodi descritti nella lezione, possiamo ottenere il seguente risultato:

Preparazione

Facciamo una foto

La sua dimensione è 350px × 200px. E queste informazioni sono sufficienti per iniziare.
Ora proviamo a posizionare il testo sopra in diversi modi.

Metodo uno: immagine come sfondo div

Dirò subito che a me stesso non piace questo metodo a causa del risultato finale primitivo, ma esiste comunque, quindi te lo parlerò.

L'essenza del metodo è che prendiamo un tag div, gli diamo dimensioni che corrispondano alla dimensione dell'immagine e impostiamo l'immagine come sfondo.
Tieni presente che la dimensione del tag = dimensione nativa + dimensione del riempimento. Pertanto, se vogliamo rientrare il contenuto dal bordo dell'immagine di 20px, allora la dimensione del div stesso deve essere specificata in modo che sia inferiore di 20px. Cioè: 350-20 = 330 di larghezza e 200-20 = 180 di altezza.

Esempio 1 (
imbottitura superiore: 20px;
larghezza:330px;
imbottitura-sinistra:20px;
altezza: 180px;
immagine di sfondo:url("/examples/20120821/bg.png");

/*formattazione del testo*/
colore:#FFF;

dimensione carattere: 40px;
}

Risultato:

Il metodo è semplice nella struttura del codice HTML (è richiesto un solo tag), ma non consente di impostare stili particolari al testo. Di conseguenza, il testo potrebbe essere difficile da leggere. Inoltre il blocco è strettamente legato alla dimensione dell'immagine, il che significa che se l'immagine cambia, bisognerà riscrivere il css

Metodo due: sovrapporre due tag uno sopra l'altro

L'essenza di questo metodo è creare un contenitore div che conterrà un'immagine e un testo. In questo caso posizioneremo il testo rispetto all'angolo in alto a sinistra del contenitore.

Esempio2 (
display: blocco in linea;
posizione:relativa;

}
.esempio2 intervallo (
display: blocco in linea;
posizione:assoluta;
in alto:30px;
sinistra:0px;

/* Decorazione del testo */
colore:#FFF;
famiglia di caratteri:Arial, Helvetica, sans-serif;
dimensione carattere: 20px;

/* Sfondo */
colore di sfondo:rgba(0,0,0,.4);
imbottitura: 10px 30px;
}

Esempio2:
Abbiamo bisogno di display:inline-block in modo che il contenitore non si estenda per tutta la larghezza dell'intera pagina.
position:relative forza tutti i blocchi nidificati con position:absolute a contare le coordinate della loro posizione non dalla finestra del browser, ma da block.example2.

Esempio 2 intervallo:
display:inline-block - in modo che gli stili relativi agli elementi del blocco possano essere applicati al nostro testo.
position:absolute - per rimuovere un tag dal flusso generale e posizionarlo ulteriormente utilizzando l'attività di coordinate specifiche. top, left: rientri in alto e a sinistra (coordinate). è possibile utilizzare invece bottom (basso) e right (destra).

Risultato:

Lo svantaggio di questo metodo è che la semantica del codice viene violata e compaiono molti tag non necessari. Ma non è vincolato alla dimensione dell'immagine, permette di creare uno sfondo per il testo, rendendolo più leggibile, e in generale ci dà completa libertà nella personalizzazione degli stili.

Giocando con i CSS e la struttura dei tag puoi ottenere il seguente risultato:

Questo risultato è abbastanza buono per la progettazione di gallerie, vetrine di negozi online e altri servizi.

Codice ultimo risultato: