Setarea opacității unei imagini de fundal în CSS implică utilizarea proprietatea imaginii de fundal împreună cu proprietatea de opacitate. Prin ajustarea opacității, controlați transparența imaginii de fundal, permițând elementelor din spatele acesteia să apară parțial, creând un efect vizual stratificat.

Folosim următoarele abordări pentru a seta opacitatea imaginii de fundal în CSS:

Cuprins

• Utilizarea proprietății Opacity
• Folosind pseudo-elemente

1. Utilizarea proprietății Opacity

The Proprietatea opacității în CSS stabilește nivelul de transparență al unui element și conținutul acestuia. Acceptarea valorilor între 0 (complet transparent) și 1 (complet opac), afectează întregul element, inclusiv copiii săi, făcându-l o modalitate simplă și eficientă de a controla transparența în web design.

Sintaxă:

div {  opacity: 0.5; } 

Exemplu: Proprietatea opacității în stilul CSS al clasei .element este setată la 0.3, făcând imaginea de fundal semi-transparentă. Aceasta ajustează vizibilitatea fundalului, menținând în același timp lizibilitatea textului.

HTML

Ieșire:

Utilizarea proprietății Opacity

2. Folosind pseudo-elemente:

Pentru a seta opacitatea unei imagini de fundal în CSS folosind pseudo-elemente , puteți aplica proprietatea de opacitate direct imaginii de fundal a pseudo-elementului, controlând transparența acestuia independent de conținutul elementului.

Sintaxă:

selector::pseudo-element {  property: value; } 

Exemplu: În acest exemplu, opacitatea imaginii de fundal este setată folosind ::înainte de pseudo-element . Ajustați nivelul de opacitate după cum este necesar. Asigurați vizibilitatea textului, poziționându-l deasupra pseudo-elementului folosind proprietatea z-index.

HTML

Ieșire:

Folosind pseudo-elemente