Css come rendere trasparente lo sfondo
La trasparenza gioca un ruolo importante nello sviluppo front-end. Ti consente di scegliere la trasparenza degli elementi delle tue pagine web.
È possibile regolare la trasparenza in diversi modi, perché ovviamente, nei CSS ci sono diversi modi per fare la stessa cosa.
La proprietà CSS è il primo modo che potrebbe venirti in mente per modificare la trasparenza. Ma questa proprietà non può venire sempre in soccorso, soprattutto quando c'è un'immagine di sfondo con del testo che si desidera rendere trasparente.
Quindi, in questo articolo, ti mostrerò i vari modi in cui puoi regolare la trasparenza in modo da poter iniziare a implementarla nei tuoi progetti di codifica.
Trasparenza dell'immagine con la proprietà di opacità CSS
Per rendere trasparente un'immagine, puoi utilizzare la proprietà CSS, come ho detto sopra. La sintassi di base della proprietà di opacità è illustrata nel frammento di codice seguente:
La proprietà di opacità accetta valori da a , dove è il valore predefinito per tutti gli elementi. Più basso è il valore, più trasparente. Quindi, se a un elemento viene data un'opacità di , sarebbe invisibile.
Puoi trovare esempi di diversi valori di opacità negli snippet di codice qui sotto:
Ho aggiunto alcuni CSS per centrare tutto sulla pagina:
Un valore di opacità di è l'impostazione predefinita, quindi l'immagine appare in questo modo:
Questo codice ci dà un'opacità del 50% e puoi vedere che il logo è un po' sbiadito:
Con un'opacità di , L'immagine è trasparente al 100%, quindi diventa invisibile:
L'unico modo per essere sicuri che l'immagine sia sulla pagina è ispezionarla con gli strumenti di sviluppo del browser:
puoi utilizzare questo valore di opacità per fare molte cose, ad esempio, puoi usarlo per includere del testo su un'immagine hero su un sito web.
Ti starai chiedendo perché vorresti rendere invisibile il contenuto con un valore di opacità pari a 0.
Vorrai sicuramente utilizzare il posizionamento CSS per aiutarti ad allineare le cose. Ne parlerò nelle prossime parti dell'articolo.
Trasparenza dell'immagine di sfondo in HTML e CSS
I CSS offrono un modo per impostare l'immagine di sfondo per un elemento contenitore con la proprietà, quindi non devi necessariamente farlo con il CSS. Ciò significa che puoi anche inserire del testo nel contenitore.
Lo svantaggio di questo approccio è che l'opacità è impostata per il contenitore in cui si trovano l'immagine e il testo. Quindi, l'opacità influisce anche sul testo, non solo sull'immagine. Probabilmente non è quello che vuoi!
Per
impostazione predefinita, quando si applica un'opacità a un contenitore, anche i discendenti la ereditano.
Una soluzione alternativa in questa situazione consiste nell'impostare l'immagine di sfondo nell'HTML. In questo modo è facile applicare l'opacità solo all'immagine, invece di impostare l'immagine di sfondo per il contenitore in il CSS.
Questa volta, l'immagine e il testo saranno separati, quindi il testo non erediterà il valore impostato per .
Ciò significa che devi anche utilizzare il posizionamento CSS per allineare il testo all'interno dell'immagine.
Nel frammento di codice CSS sopra, uso per centrare tutto sulla pagina.
L'elemento contenitore con la classe di è posizionato , In questo modo è possibile posizionare il testo al suo interno. Questo spingerà il testo nell'angolo in alto a sinistra dell'immagine. Le proprietà e vengono quindi utilizzate per spingere il testo nell'angolo in basso a sinistra dell'immagine.
Se ti stai chiedendo cosa siano le proprietà e sono le proprietà a cui puoi accedere quando usi la proprietà display.
Oltre a queste due, puoi anche accedere alle proprietà and. Ti permettono di posizionare un elemento ovunque.
Alla fine, l'immagine è opaca e il testo non viene influenzato:
Conclusione
In questo articolo hai imparato come utilizzare la proprietà opacità dei CSS per rendere trasparenti le immagini.
Poiché i CSS rimangono complicati e un po' strani, è utile combinare la proprietà di opacità con altre funzionalità CSS come il posizionamento per metterlo in uso corretto.
Oltre al posizionamento CSS, puoi anche utilizzare la proprietà con pseudo-elementi CSS come e , che è una sorta di modo hacky di fare le cose.
Grazie per aver letto, e continua a programmare.