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

cssselector {
  filter: brightness(getal);
}

Voorbeeld

Laten we de helderheid van onze afbeelding instellen op 20%:

html<div id="elem"></div>

css#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%:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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