Home > Article > Web Front-end > What are some ways to turn an entire web page into black and white?

What are some ways to turn an entire web page into black and white?

yuliaOriginal: 2018-09-20 11:38:5710532browse

This article introduces how to turn the entire web page into black and white or black, and what methods can be achieved. If you are interested in this, you can refer to it. I hope it will be helpful to you.

CSS code for the whole site.

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

How to use: This code can change the webpage to black and white. Add the code to the top of CSS to achieve plain decoration. It is recommended that webmasters across the country take action. Condolences for the compatriots who died in the earthquake.

If the website does not use CSS, you can insert it between the HTML code 93f0f5c25f18dab9d176bd4f6de5d30e and 9c3bca370b5104690d9ef395f2c5f8d1 of the web page/template:

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

Some webmasters’ websites may use this The css cannot take effect because the website does not use the latest web standard protocol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Please replace the 100db36a723c770d327fc0aef2ce13b1 at the top of the webpage with the above code.

The color of FLASH animation on some websites cannot be controlled by CSS filters. You can insert it between 69072d9f468271be1a9d8c4449214c5f and eb50c9ec568c9b96871b9e94a1ff3fd1 in the FLASH code:

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

The simplest The code to turn the page into gray is to add

<style type="text/css">
html {
    FILTER: gray
}
</style>

between the heads. In the general discuz forum, modify the

/images/header/header.css file under your control css file.

CSS method

Use the software Firefox (install firebug) plug-in; ie7 or IE 8 must have developer tools (press F12 to appear)

Everyone knows that in the IE browser, you can use a piece of code body {filter: gray;} to use Microsoft's filter code to decolor the entire website into a black and white gray tone effect, but it is not compatible with other non-IE browsers such as Firefox.

CSS website gray tone (only supports IE)

Inline style:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)' ;

css style sheet:

elem { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

/* Element must "hasLayout"! */

zoom: 1;}

Because Firefox does not support filters, so yesterday I used Firefox’s children’s shoes and found that many websites (Renren, 19th floor) were still in color.

This involves browser compatibility issues, css hacks, etc.

Yesterday, I just used IE or Firefox's firebug to uncheck the box in front of body {filter: gray;}, or put elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)' ; Uncheck this sentence to see it in color

As for how to turn Flash into gray and how to make a black and white website compatible with various browsers, I will just post the code. As for why Having written it this way, I won’t go into details. Interested friends can search for answers online.

Greying of FLASH:

The color of FLASH animation on some websites cannot be controlled by CSS filters. It can be done in the 69072d9f468271be1a9d8c4449214c5f and < of the FLASH code. Insert between ;/object>:

e20eab0f894f00d62d8e790461aebf83

3a1af799c505051f284042441e0d47d5

JavaScript

Use:

//Method 1 var el = document.getElementById( 'myEl' );grayscale( el ); // Method two grayscale( document.getElementsByTagName('div') ); // Used in jquery: grayscale( $('div') );

Reset:

grayscale.reset ( el ); // Similarly, the reset method can also be used jquerygrayscale.reset( $('div') );

Preprocessing:

grayscale.prepare( document.getElementById(' myEl') );// grayscale.prepare( $('.gall_img') );

can also be used in jquery

The above is the detailed content of What are some ways to turn an entire web page into black and white?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript firefox jquery css html firebug Object Filter var 样式表 microsoft zoom Discuz

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

Previous article：What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)Next article：What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

See more

What are some ways to turn an entire web page into black and white?

Related articles