How to make a website gray

How to make a website gray

Today's tips for sharing a web front end are how to make your website black and white on public mourning anniversaries. In fact, many methods have CSS implementation, and JS implementation. All on the Internet, JS has JS features, CSS has the advantages of CSS, of course, the shortcomings are there.

1. Super compatible IE, Firefox firefox, Google css Filter

123456789

html {filter: grayscale(100%);//IE浏览器-webkit-filter: grayscale(100%);//谷歌浏览器-moz-filter: grayscale(100%);//火狐-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);//谷歌浏览器}

Pros: Basic compatibility with all browsers.

Disadvantage: Is IE6 may belch fart, ie page Computer resource consumption Ken can be a little bigger.

2.js Code Implementation Grayscale.js code implementation

Quote the file, don't talk about it, OK or say:

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

Use:

123	<script type="text/javascript">grayscale(document.getElementById("thisImage"));<script _ue_org_tagname="script"></script>

Pros: Compatible with all browsers and can be implemented for different DOM

Disadvantage: Computer resource consumption Ken can be a little bigger, especially old ie, the old Computer browser was stuck.

3.SVG Filter Implementation

Create a new blank file, for example: gray.svg . Copy the following XML code:

12345

<<>svgversion="1.1"xmlns="http://www.w3.org/2000/svg"><<>filterid="grayscale"><<>feColorMatrixtype="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 calling code:

1	filter: url(gray.svg#grayscale);

The corresponding IE also to write a bit more:

1	filter: gray;

Pros: Compatible with all browsers

Cons: Modifications are cumbersome.

How to make a website gray