RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/functions/contrast below:

contrast() · WebPlatform Docs

contrast() 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 */

Examples

The 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:

<!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="/logo/wplogo_transparent_xlg.png" class="foo" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo baz" />
  </body>
</html>

View live example

Notes

The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:

<filter id="contrast">
  <feComponentTransfer>
    <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
    <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
    <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
  </feComponentTransfer>
</filter>

Related specifications

Filter Effects 1.0: Editor’s Draft
Filter Effects 1.0: Working Draft