CSS3教你把页面变成悲伤的黑白- 4月4日悼念那些逝去的英雄们

时间 2021-03-14

标签 css html css3 web 浏览器函数网站 spa 3d code 栏目 CSS 繁體版

原文原文链接

2020年4月4日举行了全国性哀悼活动，缅怀那些在对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞，愿逝者安息
css

咱们看到这一天不少网站忽然就变成了黑白色，像这样：html

那他们是怎么实现的呢？这就离不开CSS3中的filter(滤镜) 属性啦css3

filter

filter是css3中的一个新属性，它能够给咱们的页面元素添加各类各样的滤镜，而使咱们的图像变成灰色的是使用到了filter 中的grayscale函数，具体设置：web

filter:grayscale(100%)

若是咱们只想把图片变成灰色，这样设置：浏览器

img{
  filter:grayscale(100%)  
}

若是咱们想把这个网站都变成灰色咱们只须要设置：函数

html{
  filter:grayscale(100%)  
}

filter兼容性

filter属性IE没法支持，其余浏览器都可支持，为了更好的兼容性，咱们须要设置为：网站

html{
    -webkit-filter: grayscale(100%); /* 老版本的Chrome, Safari, Opera */
    -moz-filter: grayscale(100%);/* 老版本的Firefox */
    filter: grayscale(100%);
    filter: grayscale(1);
}

这样就实现了黑白效果哦~spa

最后 🙌

好啦，以上就是我本次分享的所有内容啦，若是你以为个人文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~3d