Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set entire page to black and White

I managed to accomplish high-contrast with invert css functionallity see (https://css-tricks.com/almanac/properties/f/filter/).

Now I need to see an entire site in black and white, not grayscale. Maybe there's a combination of this functions to make the effect I need? I've already tried contrast(100) grayscale(1); but it affects badly the letters (yo can't read them).

like image 656
Chuck Norris Avatar asked Oct 22 '15 19:10

Chuck Norris


People also ask

How do you change the background color of an entire page in HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

How do I make an image black and white in CSS?

Use the CSS filter property to convert an image to black and white.

How do I make a div take up the whole screen?

position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.


1 Answers

Add this grayscale class to your body:

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

.colored {
  background: yellow;
  color: blue;
}
<div class="colored">
  This div has a red background and blue font color!
</div>
<div class="grayscale-100">
  <div class="colored">
    This div has the same style as the above, but its parent has the grayscale class!
  </div>
</div>
like image 91
Laura San Martin Avatar answered Oct 04 '22 06:10

Laura San Martin