CSS3将图片褐色的色调的色彩元素老照片化sepia()方法

Summary

Apply a sepia tinge to an element’s color, typical of old photographs, for use by the filter property. A decimal value between 0 and 1 or percentage up to 100% controls the extent of the sepia effect.

This CSS property value is reflected in the following example:

filter: sepia(1);
filter: sepia(100%); /* same */

f07-lenna.jpg f08-lennasepia.jpg

Compatibility

There is no data available for topic “css”, feature “sepia”. 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 is fully in sepia colors.

filter sepia.png

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Filter example</title>
    <style>
      .foo {
        float: left;
      }

      .bar { 
        -webkit-filter: sepia(100%);
      }
    </style>
  </head>
  <body>
    <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png&quot; class="foo" />
    <img src="http://www.webplatform.org/logo/wplogo_transparent_xlg.png&quot; class="foo bar" />
  </body>
</html>

You may also like...

发表评论