Funcția opacity
Funcția opacity permite
modificarea transparenței imaginii de fundal.
Valoarea 100% sau 1 păstrează
transparența inițială a imaginii.
Valoarea 0 înseamnă
că imaginea va deveni complet transparentă.
Orice număr situat în
acest interval stabilește o transparență parțială a fundalului.
Nu se poate seta o valoare negativă.
În mod implicit, valoarea este 1.
Sintaxă
selector {
filter: opacity(număr);
}
Exemplu
Să setăm transparența imaginii noastre la
50%:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Exemplu
Acum să setăm transparența la
100%:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Exemplu
Acum să setăm în
funcția opacity valoarea
egală cu 0:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Vedeți și
-
funcția
blur,
care estompează fundalul -
funcția
brightness,
care setează luminozitatea fundalului -
funcția
contrast,
care setează contrastul fundalului -
funcția
drop-shadow,
care adaugă o umbră fundalului -
funcția
hue-rotate,
care setează nuanța culorii fundalului -
funcția
invert,
care inversează culorile fundalului -
funcția
sepia,
care transformă fundalul în sepia -
proprietatea
background,
care este o proprietate scurtă pentru fundal -
proprietatea
background-image,
cu care se poate seta o imagine de fundal pentru un bloc