CSS Filter Grayscale: I Want It Black

CSS to turn image into black and white with no grays

You can use contrast(100) to make it fully black and white. You can always tone it down a bit and use a lower setting such as contrast(10).

.logo {   width: 100px;   height: 100px;   filter: grayscale(1) contrast(100) brightness(1);   mix-blend-mode: multiply;}

<img src="https://d2slcw3kip6qmk.cloudfront.net/marketing/blogs/press/8-tips-designing-logos-that-dont-suck/instagram-logo.png" class="logo" />

filter grayscale in IE11 for html/body element

As IE does not support the filter: grayscale, you can try to use SVG + JS approach to apply gray scale filter in IE.

Below is the part of the code snippet.

// Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter
if (getInternetExplorerVersion() >= 10){
    $('img').each(function(){
        var el = $(this);
        el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
        var el = $(this);
        el.parent().css({"width":this.width,"height":this.height});
        el.dequeue();
    });
this.src = grayscaleIE10(this.src);
});

// Quick animation on IE10+
    $('img').hover(function () {
        $(this).parent().find('img:first').stop().animate({opacity:1}, 200);
    },
    function () {
        $('.img_grayscale').stop().animate({opacity:0}, 200);
    }
);

function grayscaleIE10(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
         }
     }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
    };
};

Reference for full sample code:

Cross-Browser Grayscale image example using CSS3 + JS

Output in IE 11:

is it possible to invert an black and white image using css?

You have the filter property:

.yourImage{
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}

This will invert the colors as opposed to simply making the image black and white.

Can we convert a black and white image to reverse effect with CSS

The best way to go about this with just CSS would be to chain together greyscale and then invert attribute as mentioned by 2C-B, like so -

-webkit-filter: grayscale(1) invert(1);
filter: grayscale(1) invert(1);

add black and white filter to specific portion of a child container

Easiest solution, but least supported: backdrop-filter

The most straight-forward way, is to actually use the rather new backdrop-filter property. Unfortunately it is only supported in Safari (and Chrome Canary) so far.

body{  background: url('https://i.imgur.com/uh5YLj5.jpg') no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  margin: 0;  padding: 0;}.profile-box{  width: 80%;  height: 60%;    /* Backdrop filter */  -webkit-backdrop-filter: grayscale(100%);  backdrop-filter: grayscale(100%);    /* Additional styles for positioning */  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<div class="profile-box"></div>

Opacity and grayscale filter of background image. Making it black and white and transparent

The unprefixed should be at the bottom!
Also, if you don't have content on your page, you should give min-height to the body:

    html{      height: 100%;    }    body {        position: relative;        background-size: 100% 100%;        background-repeat: no-repeat;      min-height: 100%;    }    body::after {      content: "";      background: url('http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg') no-repeat center center;      background-size:cover;      opacity: 0.5;      top: 0;      left: 0;      bottom: 0;      right: 0;      position: absolute;      z-index: -1;        -webkit-filter: grayscale(1); /* Old WebKit */      filter: grayscale(1);    }

A Tiger!

---

Related Topics