Your location:Tech News>News>Script>Several ways to modify the CSS style page-gray (no color light black and white only) finishing

Latest News

Several ways to modify the CSS style page-gray (no color light black and white only) finishing



  In general, when a great festival, national day of mourning, the day of the earthquake, as well as some of the great influence of the anniversary of the death or, as owners, we will make all the pages of your website turn gray (black and white) to express our condolences for the dead.Well, today to talk about, through a few simple lines of code to achieve this function.

  Today there are friends that morning to wish the whole tone of the site into a gray, black shades, remember that this will be used in some days before the commemoration of the time, before the home-site scripting is also used.Remember that time is directly modify the CSS can be achieved, since users need, and then take some time to sort out here to see if there is a better way.

  We can choose the right according to the actual needs of the CSS code styles added to the code of your web page template implemented web gray, black and white style.

  First, the code page black and white pattern A first: modify the CSS file

  We can add the following CSS code in the page''s CSS file, to achieve page black and white, is grayed website

  CSS code

  A black and white page coding style

  html {

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

  -webkit-filter: grayscale (100%);


  Also recommended that the code page code is black and white style B


  Here we can add code to the HEAD template, to achieve full stop before they can.

  The second: the pageAdding the following code in the tag

  If you do not want to change the CSS file, you can page headerIn the form of added internal label inline CSS code to achieve web site dimmed



  Third: ModifyAdding inline style tags

  As in the above two ways do not like, you can modify theTag, the method was added to the inline style, to achieve the effect of web dimmed



  Fourth: I use of CSS code


  body * {

  -webkit-filter: grayscale(100%);

  -moz-filter: grayscale(100%);

  -ms-filter: grayscale(100%);

  -o-filter: grayscale(100%);

  filter: grayscale(100%);


  filter: gray;


  Here, we added to the code selected according to the actual needs.

  PS: Several methods are used to control the display of the page through CSS filters only, the only difference to the way CSS code to call the.Ladies and gentlemen, what you like to go dig themselves!

Recommend article

Relate article