网站定制:纯手工代码,亲搜索引擎设计

18664904305
分享到:
几行代码实现网站变灰效果
几行代码实现网站变灰效果
  • 2022/12/1
  • 来源:Echa攻城狮
  • 325人阅读

老铁们有没有发现大部分网站都瞬间变灰色了。接下来我给老铁们快速解析Web网站灰色皮肤的,其实很简单的CSS3就能实现,具体如下:

filter: grayscale 使用可以调整元素的灰度值

.big-event-gray {    
filter: grayscale(100%);    
-webkit-filter: grayscale(100%);    
-moz-filter: grayscale(100%);    
-ms-filter: grayscale(100%);    
-o-filter: grayscale(100%);    
filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);    -webkit-filter: grayscale(1);
}

实践

以百度,B站,今日头条为例,大家有没有发现百度首页<body class="big-event-gray">,

B站首页中<html class="gray">和 今日头条 <html> 标签中

如下图:








就这么简单。不妨大家都试一试。


最后,还有一个最简短的代码,也可以实现这种效果。
<body style="filter: grayscale(100%);">


人网网络 © 2006-2022 版权所有   ICP证:粤ICP备12039018号

客服微信