Summary
Adjusts the difference between light and dark values, for use by the filter property. A value of 100% or a decimal value of 1 leaves the image as is, while 0 results in black. Increasing the value past 1 or 100% produces more dramatically stratified areas of light and dark.
This CSS property value is reflected in the following image:
filter: contrast(200%); filter: contrast(2); /* same */
Compatibility
There is no data available for topic “css”, feature “contrast”. If you think that there should be data available, consider opening an issue.
Examples
View live exampleThe following example shows the difference between three images, the first has the default contrast, the second one a lower contrast and the third a higher:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
float: left;
}
.bar {
-webkit-filter: contrast(50%);
}
.baz {
-webkit-filter: contrast(1.5);
}
</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" />
<img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png" class="foo baz" />
</body>
</html>
link: http://docs.webplatform.org/wiki/css/
近期评论