Home >Web Front-end >CSS Tutorial >Share a CSS special effect code that makes the entire site gray

Share a CSS special effect code that makes the entire site gray

零下一度
零下一度Original
2017-05-03 15:48:342595browse

Share a CSS special effect code that makes the entire site gray, a WeChat applet. I would like to share the following

Compatible with mainstream browsers, the CSS code for graying the entire site:

  1. html { 
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter:url("data:image/svg+xml;utf8,<svg xmlns=&#39;http://www.w3.org/2000/svg&#39;><filter id=&#39;grayscale&#39;><feColorMatrix type=&#39;matrix&#39;  values=&#39;0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0&#39;/></filter></svg>#grayscalerayscale");
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); zoom: 1;
    }

There are also js grayscale codes available:
grayscale(document.body);
grayscale.js Please search by yourself.

html {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(desaturate.svg#grayscale);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

The above is the detailed content of Share a CSS special effect code that makes the entire site gray. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn