Opacità di sfondo CSS di sfondo senza influire sul testo
Esempio 1
Per modificare l'opacità dell'immagine di sfondo senza influire sul testo, dobbiamo scrivere un po 'di codice HTML e modificare l'opacità nel codice CSS. Stiamo usando il codice Visual Studio per fare questi esempi. Quindi, apriamo il nuovo file in questo software e selezioniamo la lingua "HTML" e viene creato un file HTML. Quindi, iniziamo a codificare in questo file. Dopo aver completato il nostro codice, lo salviamo e il ".L'estensione del file HTML ”genera automaticamente questo nome file.
Creiamo una classe "div" "wrap demo" usando un tag immagine. La classe di immagini che utilizziamo è "IMG-BG". Ora, dobbiamo impostare l'immagine sullo sfondo, quindi usiamo "Sfondo-IMG SRC" e inseriamo il nome dell'immagine che vogliamo visualizzare come immagine di sfondo. Qui, abbiamo impostato lo "scenario.Immagine jpg "come immagine di sfondo. Abbiamo anche un altro "div" all'interno del primo div e il nome di questo div è "testo". E, nel secondo Div, abbiamo una voce "H1" e digitare una voce in questo "div". Quindi, chiudi entrambi i tag "div".
Codice CSS
Nel codice CSS dato, stiamo cambiando l'opacità dell'immagine di sfondo, ma l'intestazione del testo che scriviamo su questa immagine rimane la stessa. L'immagine di sfondo l'opacità non cambia l'opacità del testo.
Usiamo "IMG-BG", che è il nome della classe di immagine, e impostiamo l'opacità dell'immagine come "0.4 ". Stiamo impostando l'immagine di sfondo "posizione" su "assoluto". I "sinistra" e "top" sono entrambi impostati su "0". La "larghezza" che abbiamo impostato qui è "100%" per l'immagine di sfondo e "altezza" è "automatica". Successivamente, progettiamo il nostro testo mentre lo allineiamo nel "centro" e impostiamo la sua "famiglie di carattere" su "algerina". Stiamo usando "nero" come colore del carattere.
Produzione
Puoi vedere che l'immagine sullo sfondo non è nel suo colore originale perché usiamo “0.Opacità da 4 "su questa immagine di sfondo. Tuttavia, non vi è alcun effetto sul testo scritto sull'immagine. In questo modo, possiamo cambiare l'opacità dell'immagine senza influire sul testo.
Esempio n. 2
Modificando il codice HTML precedente, abbiamo creato un altro esempio. Ma questa volta, abbiamo aggiunto l'immagine usando le proprietà CSS.
Questo file definisce due titoli nella classe "Div". Abbiamo "H1" e "H2" nella classe Div chiamato "Hero" in questo codice. Aggiungeremo l'immagine di sfondo nel codice CSS indicato di seguito.
Codice CSS
La posizione della classe Div "eroe" è "relativa", la sua altezza è "90vh" e la sua larghezza è "90%". Il display per questa classe Div "Hero" è "Flex", oggetto nel "centro" e "giustificare il contenuto" al "centro". Il ":: prima" è lo "pseudo-selettore" utilizzato per posizionare l'immagine di sfondo prima dell'elemento selezionato. Mettiamo "contenuto", impostiamo la "immagine di background" usando "URL" e mettiamo il nome dell'immagine in questo URL. La "dimensione dello sfondo" imposta l'immagine dello sfondo su "copertura" e la sua "posizione" è "assoluta". Quindi "in alto", "in basso", "a sinistra" e "destra" sono tutti "0px". Qui, cambiamo l '"opacità" in "0.4 ". Ora applichiamo lo stile alle intestazioni. La "posizione" intestata che abbiamo impostato è "relativa". Il colore intestazione è "rosso". La dimensione di questa intestazione è "25px" e la "linea di linea" è "0.9 ". Allineiamo questo intestazione al "centro". Il colore della seconda intestazione è "nero".
Produzione
Qui, l'immagine di sfondo non viene visualizzata nel suo colore originale poiché abbiamo impostato l'opacità dell'immagine nel codice CSS. Ma il testo sull'immagine appare nel colore originale.
Esempio n. 3
Creiamo un altro file HTML. In questo codice, creiamo tre paragrafi all'interno della classe Div e la classe Div che abbiamo creato è denominata "ImagePC".
Codice CSS
Inseriremo l'immagine di sfondo nel codice CSS. Quindi, usiamo lo pseudo-selettore "prima", che abbiamo disuso nell'esempio precedente. Qui, il codice è lo stesso del secondo esempio, ma cambiamo l'immagine di sfondo e utilizziamo la proprietà "opacità" su un'immagine diversa. Qui, "sinistra", "a destra", "in basso" e "superiore" sono tutti impostati su "0". E “0.4 "dell'opacità viene utilizzata per questa immagine. Impostiamo il paragrafo nella posizione "relativa". E impostare la sua altezza uguale a “0.9px ". Cambiamo anche la "dimensione del carattere" del paragrafo e sempiamo questo su "25px". La famiglia del carattere "algerina" viene utilizzata per il paragrafo. E abbiamo impostato i suoi migliori "200px".
Produzione
Puoi vedere che l'immagine di sfondo mostra una certa trasparenza. Qui, utilizziamo il 40% di opacità su questa immagine di sfondo, ma potresti notare che non influisce sul testo scritto sull'immagine di sfondo.
Esempio # 4
Stiamo apportando piccole modifiche al precedente codice HTML. In questo esempio, utilizziamo quattro paragrafi all'interno dei nomi "Div" e "GiveGivingAgeOpc" per questa classe Div.
Codice CSS
Questo codice CSS è lo stesso del codice precedente. Tuttavia, cambiamo l '"URL" dell'immagine di sfondo. Usiamo la "scenario di fondo.Immagine jpg "qui. Ricorda che stai usando l'estensione dell'immagine corretta con il nome dell'immagine. È necessario inserire il percorso corretto dell'immagine in questo "URL". Usiamo il “0.Valore 5 "per l'opacità dell'immagine di sfondo in questo caso. La "dimensione del carattere" che utilizziamo è "30px" in questo esempio per il paragrafo. Abbiamo impostato la famiglia di caratteri di paragrafo su "Times New Roman", e per di più è "200px". Il paragrafo appare in "Maroon" ed è "più audace" in "font-peso".
Produzione
Questa immagine di sfondo mostra il 50% di opacità mentre impostiamo il suo valore su “0.5 ", ma il testo rimane lo stesso. Questo valore di opacità non si applica al testo.
Conclusione
Abbiamo presentato questa guida in cui cambiamo l'opacità dell'immagine di sfondo senza influire sul testo. Pertanto, è possibile determinare come modificare l'opacità dell'immagine di sfondo in CSS senza influire sul testo. Abbiamo spiegato e mostrato diversi esempi in cui utilizziamo la proprietà "opacità" per modificare l'immagine di sfondo opacità, ma il testo rimane lo stesso. Dopo aver appreso questa guida, è possibile inserire le immagini di sfondo nei tuoi progetti e impostare l'opacità dell'immagine di sfondo senza influire sul testo usando la proprietà CSS.