Summary
Adjust the brightness of an element’s color, for use by the filter property. A value of 100% or decimal value of 1 leaves the image as is, while 0 produces black. Increasing the value from 1 or 100% brightens pixels from their original values.
This CSS property value is reflected in the following image:
filter: brightness(40%); filter: brightness(0.4); /* same */
Compatibility
There is no data available for topic “css”, feature “brightness”. If you think that there should be data available, consider opening an issue.
Examples
View live exampleThe following example shows the difference between two images, where one has a brightness of 50%:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
float: left;
}
.bar {
-webkit-filter: brightness(50%);
}
</style>
</head>
<body>
<img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png" class="foo" />
<img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png" class="foo bar" />
</body>
</html>
近期评论