CSS brightness() funktion
- Föregående sida CSS blur() funktion
- Nästa sida CSS calc() funktion
- Gå tillbaka till föregående nivå CSS funktion referenshandbok
Definition och användning
CSS brightness()
Filterfunktioner används för att justera elementets ljusighet.
- 0% gör bilden helt svart
- 100% (eller 1) är standardvärdet, vilket innebär originalbilden
- Värden över 100% gör bilden ljusare
- Värden under 100% gör bilden mörkare
Exempel
Exempel 1
Gör bilden ljusare eller mörkare än originalbilden:
#img1 { filter: brightness(150%); } #img2 { filter: brightness(50%); }
Exempel 2
för att brightness()
och backdrop-filter
Använda egenskaper tillsammans:
div.transbox { background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: brightness(150%); backdrop-filter: brightness(150%); padding: 20px; margin: 30px; font-weight: bold; }
CSS syntax
brightness(amount)
Värde | Beskrivning |
---|---|
amount |
Valfritt. Anger ljusvärdet, vilket kan vara ett nummer eller en procentandel. 0% gör elementet helt svart. 100% (eller 1) är standardvärdet, vilket innebär originalbilden (ingen effekt). Värden över 100% gör bilden ljusare. |
Tekniska detaljer
Version: | CSS Filter Effects Module Level 1 |
---|
Webbläsarstöd
Tabellens siffror representerar den första versionen av webbläsaren som helt stöder denna funktion.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
18 | 12 | 35 | 6 | 15 |
Relaterade sidor
Referens:CSS filter egenskap
Referens:CSS blur() funktion
Referens:CSS contrast() funktion
Referens:CSS drop-shadow() funktion
Referens:CSS grayscale() funktion
Referens:CSS hue-rotate() funktion
Referens:CSS invert() funktion
Referens:CSS opacity() funktion
Referens:CSS saturate() funktion
Referens:CSS sepia() funktion
- Föregående sida CSS blur() funktion
- Nästa sida CSS calc() funktion
- Gå tillbaka till föregående nivå CSS funktion referenshandbok