页面整体变为灰色 -- CSS3 filter(滤镜) 属性

        需要将网页整体变为灰色基调,若是一个一个的去修改样式的工作量是很大的,此时使用 CSS3 filter(滤镜) 属性可非常简便的实现整体页面变灰的需求。

// 修改所有图片的颜色为黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

        所以可给整体容器设置 filter: grayscale(100%); 即可实现页面整体变为灰色,注意兼容性写法。

你可能感兴趣的:(css3,前端)