Functie brightness
De functie brightness maakt het mogelijk om de
helderheid van een achtergrondafbeelding aan te passen. De oorspronkelijke helderheid
van de achtergrond wordt bepaald door de waarde 100% of 1.
Wanneer deze waarden verlaagd worden, neemt de helderheid van de afbeelding af.
Dienovereenkomstig neemt de helderheid toe wanneer de waarde boven 100%
wordt verhoogd. Negatieve waarden worden niet toegepast,
en een lege waarde wordt automatisch gezien als
1.
Syntaxis
selector {
filter: brightness(getal);
}
Voorbeeld
Laten we de helderheid van onze afbeelding instellen
op 20%:
<div id="elem"></div>
#elem {
filter: brightness(20%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we nu de helderheid van de afbeelding verhogen
naar 120%:
<div id="elem"></div>
#elem {
filter: brightness(120%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we de oorspronkelijke helderheid instellen voor onze afbeelding:
<div id="elem"></div>
#elem {
filter: brightness(1);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Zie ook
-
de functie
blur,
die de achtergrond vervaagt -
de functie
contrast,
die het contrast voor de achtergrond instelt -
de functie
drop-shadow,
die een schaduw voor de achtergrond instelt -
de functie
hue-rotate,
die de kleurtoon voor de achtergrond instelt -
de functie
invert,
die de kleuren van de achtergrond omkeert -
de functie
opacity,
die de transparantie voor de achtergrond instelt -
de functie
sepia,
die de achtergrond omzet naar sepiakleurig -
de eigenschap
background,
die een verkorte eigenschap is voor de achtergrond -
de eigenschap
background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld -
de eigenschap
filter,
die een stijl voor de achtergrond instelt