Funktionen brightness

Funktionen brightness låter dig ändra ljusstyrkan på en bakgrundsbild. Den ursprungliga ljusstyrkan bestäms av värdet 100% eller 1, när dessa minskas så minskas även bildens ljusstyrka. Följaktligen, när värdet ökas över 100% ökar ljusstyrkan. Negativa värden tillämpas inte, och ett tomt värde tolkas automatiskt som 1.

Syntax

cssselektor {
  filter: brightness(tal);
}

Exempel

Låt oss ställa in ljusstyrkan för vår bild till 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;
}

Результат:

Exempel

Och låt oss nu öka bildens ljusstyrka till 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;
}

Результат:

Exempel

Låt oss ställa in ursprunglig ljusstyrka för vår bild:

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;
}

Результат:

Se även