Come sovrapporre più immagini usando CSS
Pubblicato: 2020-07-15CSS sta per Foglio di stile a cascata. È un linguaggio per fogli di stile che definisce la presentazione del documento in un linguaggio di markup come HTML. Il foglio di stile a cascata differenzia il contenuto e altre presentazioni visive come colori, layout, caratteri e temi. Questa differenziazione migliora l'accesso al contenuto e controlla le specifiche delle presentazioni. CSS definisce un tema comune alle pagine web selezionate ed è visibile in tutto il sito web. I dettagli del file CSS vengono mantenuti separati per ridurre i problemi complessi e la struttura del contenuto ridondante.
CSS è disponibile per sovrapporre più immagini, ovvero mettere un'immagine sopra l'altra immagine. Ci sono tre metodi per farlo. Diamo un'occhiata a ciascuno di essi uno per uno.
1. Utilizzo della griglia CSS:
Una griglia CSS è la funzionalità CSS bidimensionale più potente che gestisce righe e colonne e il contenuto in essa contenuto. Puoi lavorare sia con gli elementi padre che con gli elementi figli lavorando con le regole CSS. La griglia in CSS ha cambiato radicalmente il modo in cui imposti la pagina web e il suo contenuto. Per lavorare con la griglia, dovresti conoscere il contenitore della griglia, l'elemento della griglia, la linea della griglia e la cella della griglia. Include anche altri termini come traccia della griglia e area della griglia. Gli elementi figlio di un contenitore della griglia possono posizionarsi come se sembrassero sovrapporsi ad altri.
È possibile creare dimensioni delle tracce fisse e flessibili in una griglia utilizzando i pixel. Specificando un certo numero di pixel è possibile impostare la griglia in modo che si adatti al layout desiderato. Per specificare una traccia griglia flessibile, puoi menzionare i valori in termini di percentuale.
La caratteristica più importante di CSS Grid è che può sovrapporre le immagini modificando gli indici z senza interrompere il normale flusso di documenti. Utilizzando una griglia CSS, puoi lavorare con qualsiasi altezza e larghezza di detto elemento. Inoltre, l'immagine in alto è sempre posizionata in basso, che si allinea con l'angolo in basso a sinistra. L'immagine si allineerà con il bordo sinistro dell'elemento contenitore.
Il codice HTML per esso:
<classe div="stack di immagini">
<div class="image-stack__item image-stack__item—top">
<img src=”Https://sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=”La prima immagine”>
</div>
<div class="image-stack__item image-stack__item—fondo">
<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”seconda immagine”>
</div></div>
È possibile aggiungere l'attributo role="presentazione" all'elemento se l'immagine ha un aspetto decorativo. Con questa specifica, l'immagine non verrebbe visualizzata per i lettori dello schermo.
Ora dobbiamo specificare la larghezza delle colonne nella griglia presa in considerazione. Qui, ci sono diversi modi per farlo, ma creeremo una griglia a 12 colonne perché generalmente viene utilizzata la griglia a 12 colonne.
Per questo, specificheremo quanto segue nel nostro file CSS nell'elemento genitore, che contiene altri elementi:
.pila di immagini
{
Visualizzazione: griglia;
Colonna-modello-griglia: repeat(12, 1fr);
Posizione: relativa;
}
Le colonne modello-griglia sono una caratteristica per specificare il numero di colonne che avrà una griglia. Considerando che, 1fr specifica al browser di calcolare la quantità di spazio disponibile. Queste cose sono utili quando hai degli spazi vuoti all'interno di colonne e righe.
Posizione: il relativo è importante qui. Consente allo z-index per le immagini di funzionare in base ai nostri requisiti e alle nostre specifiche. Una volta che hai a disposizione una griglia funzionale, devi guardare la larghezza delle immagini. Per aggiungere larghezza alle immagini, la specifica ideale è specificare la larghezza in percentuale. Ora dovresti iniziare con la larghezza totale del componente relativo all'immagine. La larghezza dell'immagine è 844 px, il che significa che è del 100%. La larghezza dell'immagine in alto è 521 px. Qui possiamo dividere 521px per 844px. Ora il valore risultante deve essere moltiplicato per 100, che equivale all'incirca al 61,7%.
Se arrotondi dal 61,7% al 62%, vedrai che ottieni un valore compreso tra 58% e 66%. Quindi, prenderemo il 66%. Per l'immagine in alto, abbiamo il seguente codice che va in CSS:
.image-stack__item: in alto
{
Colonna-griglia: 1/campata 8;
Riga della griglia: 1; // deve trovarsi sulla stessa riga della seconda immagine
Padding-top: 20% // questo posiziona l'immagine in basso e la mantiene proporzionale.
indice z: 1; //questo rende l'immagine nella parte superiore della foto in basso.
}
Per la seconda immagine calcoliamo:
645 px/844 px e il valore deve moltiplicarsi per 100, che produce il 76,4%. Lo arrotonderemo al 75%, che si adatta perfettamente alla nostra griglia a 12 colonne nel CSS.
Devi assicurarti che l'immagine in basso occupi nove colonne e inizi il rendering attraverso la quarta linea della griglia. Con questo, l'immagine dovrebbe occupare il resto della griglia.
Il codice CSS per l'immagine in basso è il seguente:
.image-stack__item: in basso
{
colonna della griglia: 4
riga della griglia: 1; //questo fa apparire l'immagine sulla stessa riga
}
Con la griglia CSS è possibile ogni tipo di sovrapposizione. La sovrapposizione può includere immagini su immagine, testo su immagine o anche testo sovrapposto al testo. Offre tutte le possibilità che puoi immaginare. Il codice finale appare come di seguito:
<div class=”container”> <p>Metodo della griglia CSS</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”>
<Img src=”Https//sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=La prima immagine”></div>
<div class="image-stack__item image-stack__item–bottom">
<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”seconda immagine”></div>
</div> <p>Il contenuto testuale va qui.</p> </div>
2. Floating con margini negativi:
La proprietà Float di CSS mette l'elemento della pagina web sul lato sinistro o destro del suo contenitore. Consente al testo e agli elementi inline di avvolgere l'elemento. Anche se un elemento float fa parte della pagina, viene comunque portato fuori dal flusso normale. Con la proprietà float, l'elemento si sposta a destra oa sinistra per toccare il bordo del suo elemento contenitore.
La proprietà float rende gli elementi che la circondano, float. Questa proprietà esegue il rendering degli elementi e del contenuto che sembrano simili al design di stampa. Tale concetto è chiamato avvolgimento del testo. Significa che il testo si avvolge attorno agli elementi. Nella progettazione di stampa, il componente potrebbe essere costituito da immagini in cui il testo fluttua attorno ad esse. Ignorando il ritorno a capo del testo, il testo si sovrappone all'immagine come se l'immagine non fosse presente. Puoi utilizzare i float per progettare il layout di un'intera pagina Web o sito Web. Non si limita semplicemente a avvolgere il testo attorno agli elementi della pagina web.
Il codice qui supporterà tutti i browser, incluso Internet Explorer. Questo metodo si concentra sull'estrarre gli elementi dal documento e renderli utilizzando float. La parte migliore di questa sintassi di codifica è che la struttura rimane simile alla struttura menzionata in precedenza. Per l'elemento genitore nello stack di immagini, usiamo "clear", mentre facciamo fluttuare i suoi elementi figli. Qui, il contenuto viene visualizzato sotto l'immagine. La sintassi è la seguente:
.image-stack::dopo
{
Contenuto: ' ';
Display: tavolo;
Chiaro: entrambi;
}
Il codice sopra è per l'immagine posta in basso. Quindi, la seconda immagine andrà sopra questa immagine.
Ora, per l'immagine posta in alto, ecco il codice:
.image-stack__item: in alto
{
Galleggiante: sinistra;
Larghezza: 66%;
Margine-destra: -100%;
Imbottitura superiore: 15%;
Posizione: relativa;
indice z: 1;
}
Abbiamo un margine specificato in un valore negativo, che è significativo. Il margine negativo si comporta in modo diverso in diverse situazioni. Se si applicano in alto o in basso, agiscono in un modo particolare. E si comportano diversamente se il margine negativo si trova a sinistra oa destra degli elementi mobili.
Qui, abbiamo applicato il margine destro negativo sull'elemento sinistro mobile che consente la sovrapposizione dell'immagine. -100% è la larghezza del contenitore dell'immagine. Questo valore viene posizionato a sinistra e consente all'immagine in basso di eseguire il rendering al di sotto di essa come se non fosse nel modello a oggetti del documento. Quindi, il codice finale appare così:
{
formato scatola: bordo-scatola;
}
p {
dimensione del carattere: 20px;
famiglia di caratteri: sans-serif;
colore: #6439a9;
}
.container {
imbottitura: 100px 30px;
larghezza: 100%;
margine: 0 automatico;
larghezza massima: 900px;
}
// clearfix
.image-stack::dopo {
contenuto: ' ';
display: tavolo;
chiaro: entrambi;
}
.image-stack__item–top {
galleggiante: sinistra;
larghezza: 66%;
margine-destra: -100%;
imbottitura superiore: 15%; // arbitrario
posizione: relativa;
indice z: 1;
}
.image-stack__item–in basso
{
galleggiante: a destra;
larghezza: 75%;
}
img
{
larghezza: 100%;
}
3. Griglia CSS e metodi float combinati:
I codici in questo metodo supportano il funzionamento su tutti i browser. Specifica anche il codice dove funziona perfettamente su browser specifici vecchi e obsoleti. Qui utilizziamo la funzione "@supports", che è una parte essenziale di questo metodo. Serve per verificare se il browser in esame supporta il valore “visualizzazione: griglia”. Utilizzeremo il codice che supporta il browser Internet Explorer prima di utilizzare la funzione "@supports" del codice.
Nella funzione "@supports", ripristineremo la larghezza al 100%. Ora, la proprietà float non ha alcun significato qui dth al 100%. ing per aggiungere il browser IE in considerazione supporta anner. E si comportano in modo diverso, se il negativo m. Non influirà sugli elementi in uso. Quindi il codice finale per esso è simile a quello qui sotto:
<div class=”container”> <p>Metodo Cross Browser</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”> <img src=”https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:/ /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>Il contenuto testuale va qui.</p> </div>
I vantaggi dell'utilizzo delle griglie:
La riduzione della codifica è il vantaggio essenziale dell'utilizzo delle griglie CSS. Invece di generare elementi HTML aggiuntivi per basare la tua griglia, usi un foglio di stile per creare una griglia. I framework a griglia non utilizzano sempre nomi semanticamente sani della classe. Poiché una griglia CSS è di natura nativa, non è necessario includere librerie di grandi dimensioni nel progetto per supportarla. Lo sviluppo web basato su CSS è più veloce perché imparare la sintassi è facile. Inoltre, la prototipazione con CSS è rapida ed efficace.
Con il crescente supporto del browser, puoi utilizzare la griglia praticamente ovunque. I tutorial per la griglia sono disponibili ovunque; tutti, dal principiante allo sviluppatore avanzato, possono usarlo. Una griglia consente una facile implementazione dell'interfaccia utente di una pagina Web in diversi contesti. È possibile creare un layout strutturato e reattivo senza infinito avvolgimento del testo e disporre di tre layout di colonne. Una griglia offre facile manutenzione e flessibilità per la progettazione della pagina web. Inoltre, puoi lavorare con righe e colonne contemporaneamente per generare piani complicati ma flessibili. Poiché la maggior parte dei browser supporta il sistema a griglia, non è necessario un codice di fallback per farlo funzionare.
Una griglia consente a un designer di generare un layout di sito Web creativo e sorprendente. Inoltre, i designer possono scegliere di trasformarlo in un design reattivo senza compromettere l'aspetto generale e l'estetica visiva del design. CSS combina sia la griglia che le idee di progettazione del designer per generare un design pronto all'uso. Questo design è sia sbalorditivo nell'aspetto che reattivo per gli utenti esperti di tecnologia di oggi.
Conclusione:
La sovrapposizione di immagini è un concetto entusiasmante nel mondo del design. Quando uno sviluppatore deve gestire la sovrapposizione delle foto, puoi seguire i modi menzionati. Se sei esperto di CSS, come sviluppatore, sai che è praticamente possibile realizzare qualsiasi cosa tu scelga. Ma i principianti possono dare un'occhiata a questo tutorial e fare in modo che la sovrapposizione delle immagini avvenga in un lasso di tempo molto minore. Dovrebbe sapere quale codice va in quale file.