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
selektor {
filter: brightness(tal);
}
Exempel
Låt oss ställa in ljusstyrkan för vår bild
till 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;
}
:
Exempel
Och låt oss nu öka bildens ljusstyrka
till 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;
}
:
Exempel
Låt oss ställa in ursprunglig ljusstyrka för vår bild:
<div id="elem"></div>
#elem {
filter: brightness(1);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Se även
-
funktionen
blur,
som oskärper bakgrunden -
funktionen
contrast,
som ställer in kontrast på bakgrunden -
funktionen
drop-shadow,
som lägger till en skugga på bakgrunden -
funktionen
hue-rotate,
som ställer in nyans på bakgrunden -
funktionen
invert,
som inverterar bakgrundens färger -
funktionen
opacity,
som ställer in genomskinlighet på bakgrunden -
funktionen
sepia,
som omvandlar bakgrunden till sepia -
egenskapen
background,
som är en sammanfattande egenskap för bakgrund -
egenskapen
background-image,
som används för att sätta en bakgrundsbild på ett element -
egenskapen
filter,
som applicerar effekter på bakgrunden