今天是: 2020年07月09日 星期四

您现在的位置是:
首页 » 技术分享 » 怎么让网站页面变成灰色?

怎么让网站页面变成灰色?

4月4号是清明节,当天为了纪念在疫情中失去生命的医护人员和民众,全网都变成灰色页面,以表示我们对逝者的悼念。

《怎么让网站页面变成灰色?》

 

那么对于这个效果很多人会问,是不是要写js代码呢?其实不需要那么复杂,我们可以通过css3的滤镜属性完成。

比如说修改图片的颜色为黑白(100% 灰度),用以下代码(IE浏览器是不支持这个滤镜属性的,有用oopacity来替代):

图片变灰白效果

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

图片变高斯模糊效果

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

图片变高亮效果

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

图片变应用色相旋转

img {
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

图片变阴影效果

img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

图片变透明效果

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}
除了上面列举的几种还有很多,查看更多可以去菜鸟教程。言归正传,下面写下网站页面变灰的css代码:
 {
    filter: grayscale(100%);
   -webkit-filter: grayscale(100%); 
   -moz-filter: grayscale(100%); 
   -ms-filter: grayscale(100%); 
   -o-filter: grayscale(100%); 
   -webkit-filter: grayscale(1); 
}
把这个代码放在body里或者网站的css样式里
点赞