CSS dopo l'immagine

Usiamo il selettore "dopo" per le sovrapposizioni di immagini in CSS. Le sovrapposizioni sono definite come il rivestimento su qualcosa. Un'overlay di immagine significa che copriamo l'immagine con un rivestimento in modo che sia separata dal testo. Le immagini che usano sono di colori diversi, ma il nostro testo è in un unico colore, quindi dobbiamo mettere la sovrapposizione tra il testo e l'immagine. Per questo, utilizziamo il selettore "dopo" o lo pseudo-elemento in CSS per produrre queste sovrapposizioni tra l'immagine e il testo in modo che non sia difficile separare il testo dall'immagine. Non possiamo selezionare il testo se non esiste un overlay tra il testo e l'immagine. Ma quando creiamo la sovrapposizione, selezioneremo il testo che scriviamo sull'immagine.

Questo tutorial ti mostrerà come aggiungere un'overlay di immagine usando lo pseudo-elemento "dopo" in CSS. Aggiungeremo l'effetto di sovrapposizione dell'immagine con l'aiuto dello pseudo-elemento "dopo".

Esempio 1:

Per utilizzare lo pseudo-elemento "dopo" in CSS, creiamo un file HTML. Il codice che scriviamo nel file HTML è riportato in questo esempio. Puoi utilizzare l'editor di testo che desideri e iniziare a codificare su di esso. Scrivi il codice presentato nella seguente immagine. Scriviamo questo codice nel software del codice Visual Studio. Selezionando la lingua HTML in questo nuovo file, scriviamo "!". Premere INVIO quindi i tag necessari verranno automaticamente visualizzati su questo file. Inizia a codificare nel suo corpo.

Creiamo una classe "sezione" denominata "banner" e mettiamo un'intestazione all'interno di questo "banner". Colleghiamo anche questo HTML con il file CSS, quindi tutti gli stili che facciamo nel file CSS saranno applicati a questo codice HTML. Lo salviamo con il ".estensione del file html ".

Codice CSS:

In questo codice CSS utilizziamo lo pseudo-elemento "dopo" per creare la sovrapposizione dell'immagine. Per lo pseudo-elemento "dopo", dobbiamo avere il contenuto, quindi mettiamo il "contenuto" qui. Creiamo un elemento all'interno del "banner" dopo il contenuto del banner. Ora, realizziamo il "display" "blocco" e diamo la "posizione" a questo banner come "assoluto". La "parte superiore" e "a sinistra" sono entrambi "0". Quindi, abbiamo impostato la "larghezza" sul "100%" uguale alla "altezza" con valore "100%". Usiamo il "gradiente lineare" per "l'immagine di sfondo" per rendere l'immagine più attraente. Diamo un "120 gradi" a questo e mettiamo due colori su questa proprietà. Quindi, abbiamo impostato la sua "opacità" e mettiamo il "0.Valore 7 "per questo. Usiamo qui il valore z-indice e mettiamo "0" per questo.

Quindi, abbiamo impostato la posizione del "banner" su "parente". Usiamo anche l'immagine di sfondo all'interno del banner. La "imbottitura" che abbiamo impostato per questo è "20vh" sia per "superiore" che per "in basso" e "0" per "sinistra" e "destra". Abbiamo impostato la "copertina" per la "dimensione di sfondo" e il "allineamento del testo" sul "centro". Ora utilizziamo il banner e selezioniamo tutti gli elementi del banner usando il selettore "*". Quando usiamo questo selettore "*", ottiene tutti gli elementi e applichiamo lo stile che ci mettiamo al suo interno su tutti gli elementi. Poiché la nostra sovrapposizione copre sia il testo che l'immagine, utilizziamo il "indice z" per risolvere questo problema e impostiamo il contenuto "Z-INDEX" su "10". E imposta il "parente" per la sua "posizione".

Impostiamo il colore del contenuto su "nero" in modo che il contenuto scritto all'interno del banner appaia il nero sull'immagine. "Allineiamo" l'intestazione "al" centro "e utilizziamo la famiglia del carattere" algerina "per questa intestazione. Inoltre, abbiamo impostato le sue dimensioni su "40px".

Produzione:
È possibile ottenere l'uscita sul browser predefinito quando si preme "Alt+B" o fare clic sul pulsante destro del mouse sul file HTML e quindi selezionare il browser predefinito ". L'output fornito renderà sul browser.

Esempio n. 2:

Qui, abbiamo un altro esempio in cui creiamo la sovrapposizione dell'immagine usando lo stesso pseudo-elemento e cambiamo un po 'il nostro codice e ti mostriamo come funziona.

Il codice HTML è lo stesso per questo esempio. Ma qui, cambiamo l'intestazione che è scritta all'interno del banner. Separeremo questo intestazione in due righe usando il "
"Tag.

Innanzitutto, abbiamo impostato un po 'la voce applicando alcune proprietà di stile. Abbiamo impostato il "allineamento del testo", "dimensione del carattere" e "famiglie di carattere" dell'intestazione. Quindi, arriva lo pseudo-selettore "dopo" che crea una sovrapposizione tra l'immagine e il testo. Ogni volta che usiamo questo selettore "dopo" in CSS, dobbiamo prima definire il "contenuto". Dopo questo, abbiamo impostato il suo "display" su "bloccare". I valori "top" e "a sinistra" che abbiamo messo qui sono impostati su "0". Mentre i valori di "larghezza" e "altezza" sono impostati su "100". Quindi applichiamo il "gradiente lineare" e selezioniamo due colori per questo che è "rosa" e "blu". Inoltre, la proprietà "opacità" viene utilizzata qui per dare una vista trasparente dell'immagine di sfondo. Abbiamo impostato il suo valore su “0.6 ". Usiamo la "scenario di fondo.jpg "come immagine di sfondo per questo. Inseriamo questo nome di immagine nella proprietà "URL" di "Image Background".

Quindi, utilizziamo l'imbottitura per creare lo spazio e impostare i suoi valori "top", "in basso", "destra" e "a sinistra" usando una proprietà "imbottitura". Qui, il "200vh" definisce l'imbottitura "superiore" e "in basso" e "0" definisce l'imbottitura "sinistra" e "destra". La "dimensione dello sfondo" è "copertina" come abbiamo usato nel nostro primo esempio. Quindi, abbiamo impostato il "banner" e "z-indice". Per questo, usiamo per la prima volta lo pseudo-elemento "dopo". All'interno di questo, abbiamo impostato "-index" su "1". Dà un indice Z "1" all'overlay. Di seguito, impostiamo il "indice z" per il "contenuto" e applichiamo "10" per il contenuto z-indice. Usiamo il selettore "*" con il "banner" prima di dare un indice z al contenuto del banner. Questo indice z si applica a tutti i contenuti scritti nel banner. Utilizziamo anche la "miscela miscela" per la sovrapposizione che abbiamo creato in precedenza. Questa proprietà "Mix-Blend-Mode" aiuta a mescolare i più elementi.

Quando usiamo questa proprietà con la nostra sovrapposizione, crea alcune nuove incredibili combinazioni per noi. Possiamo rendere il nostro overlay una sovrapposizione avanzata utilizzando questa "property miscela" in CSS. Dopo aver completato questo codice, dobbiamo salvarlo con un ".Estensione del file CSS ”in quanto è il file CSS.

Produzione:

Conclusione

Abbiamo discusso dello pseudo-elemento "dopo" in CSS per fare l'immagine di sovrapposizione in questo tutorial. Abbiamo appreso che la sovrapposizione è creata tra l'immagine di sfondo e il testo in modo da poter selezionare il testo, il che significa che il testo è separato dall'immagine. Abbiamo usato la "miscela miscela" su queste sovrapposizioni per renderle più attraenti. Abbiamo anche esplorato i diversi esempi e spiegato questi esempi in questo tutorial. Abbiamo fornito tutti i dettagli in questo tutorial che è necessario per comprendere questo pseudo-elemento "dopo" in CSS. Ora, puoi creare queste sovrapposizioni sui tuoi progetti dopo aver compreso questi esempi che ti aiuteranno molto nella tua codifica futura.