兼容firefox，chrome的网页灰度效果

实现网页灰度效果的方法一般有以下两种：

方法一：使用CSS3滤镜

CSS3提供了一种filter属性来实现图像的处理效果，其中的grayscale()函数可以将彩色图像转换为灰度图像。

以下是实现灰度效果的CSS代码：

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

该代码中，filter是标准的CSS属性，-webkit-filter是Chrome和Safari浏览器对该属性的浏览器私有前缀。

以上代码会将该元素及其内部所有内容变为灰色，可通过透明度设置来调整灰色的程度。

方法二：使用JavaScript转换

另一种实现网页灰度效果的方法是使用原生JavaScript，依次访问图片像素并进行相应的转换。

以下是一个实现灰度效果的JavaScript代码示例：

function grayscaleImage(image) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = image.width;
    var height = image.height;

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(image, 0, 0, width, height);

    var imageData = ctx.getImageData(0, 0, width, height);
    var data = imageData.data;

    for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg;
        data[i + 1] = avg;
        data[i + 2] = avg;
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas.toDataURL();
}

以上代码会将传入的图片转换为灰度图像并返回一个Base64编码的URL，可直接用于img标签的src属性中。

示例代码2：

function grayscalePage() {
    var elements = document.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.filter = 'grayscale(100%)';
        elements[i].style['-webkit-filter'] = 'grayscale(100%)';
    }
}

以上代码会将页面中的所有元素变为灰色，适用于需要一次性将整个页面变为灰度的场景。

综上所述，以上两种方法均可以实现网页灰度效果，具体选择哪种方法可以根据实际情况来决定。