css to turn web pages into black and white

There are three ways to globally change the color of the entire web page, namely: direct css setting, adding svg filter, and changing the color by traversing all tags through js.

1. Set css directly

Edit the style directly, and then set class

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

where it needs to be applied (video tutorial: css video tutorial)

2. svg

Write the svg file first

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="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"/>
    </filter>
</svg>

css call

filter: url(gray.svg#grayscale);

3.js traversal

Just insert the code directly La, it is impossible to write it by hand (ps: rgba and !important cannot be changed, others have not been tested)

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

The js source is not very good, which will cause the webpage to load too slowly. You can download it manually. Local grayscale.js (after clicking F12, switch to the Network tab, refresh the web page and a file will appear, right-click save as)

Then use js or jq to call

/*js调用*/
grayscale(document.getElementById("thisImage"));
/*jq调用*/
grayscale($("#thisImage"));

Recommended tutorial: cssquickstart

The above is the detailed content of css to turn web pages into black and white. For more information, please follow other related articles on the PHP Chinese website!