举国哀伤,如何用一行代码让网站变灰?

刚刚 在网上看到一个最简单的解决办法,就是:

-webkit-filter:grayscale(0.94);

给html根节点添加这行代码就可以

html.gray{
    -webkit-filter:grayscale(0.94);
}

兼容性:

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

如果还有浏览器不兼容,那只能搬出JS了
var imgObj = document.getElementById('imgToGray');   

function gray(imgObj) {  
    var canvas = document.createElement('canvas');  
    var canvasContext = canvas.getContext('2d');  

    var imgW = imgObj.width;  
    var imgH = imgObj.height;  
    canvas.width = imgW;  
    canvas.height = imgH;  

    canvasContext.drawImage(imgObj, 0, 0);  
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);  

    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;  
        }  
    }  
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
    return canvas.toDataURL();  
}  
imgObj.src = gray(imgObj);

你可能感兴趣的:(html,css)