【前端】一行代码实现网站网页变黑白灰效果

一行代码实现网页变黑白灰的效果,CSS很强大!

在html标签下增加CSS样式就可以实现网页秒变灰的效果

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

为了适配不用的浏览器类型,可以补充一下,兼容性更高

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);
}

以百度为例展示一下效果原网站:

【前端】一行代码实现网站网页变黑白灰效果_第1张图片

变黑白灰效果:

【前端】一行代码实现网站网页变黑白灰效果_第2张图片

你可能感兴趣的:(前端,css,网页效果,html)