使用css3将整个网站变成黑白色调

0 点赞
0 条评论
552 次浏览
发布于 7 个月前

有时间进行哀悼活动时,身为站长的我们都会响应国家的号召让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念,通过几行简单的代码,来实现这个功能

1、css实现

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);
  _filter:none;
}

2、svg实现

//gray.svg<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

然后通过css调用

html{
  -webkit-filter: url('./gray.svg#grayscale');
  -moz-filter: url('./gray.svg#grayscale');
  -ms-filter: url('./gray.svg#grayscale');
  -o-filter: url('./gray.svg#grayscale');
  filter: url('./gray.svg#grayscale');
}

之前效果:

之后的效果:

语法解释:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale

版权所属:开发日记
转载时必须以链接形式注明原始出处及本声明。
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...