在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。那么下面分享几种方法 1、直接body中加入代码即可 实现这种效果很简单,只需要一句css代码:filter: grayscale(100%);,将其放到body元素的样式里面就行了。我们自己实现的效果: 2、直接在调用的css样式文件中,这样不用改html代码。 直接上代码:
或下载的代码,推荐上面的代码 复制代码 代码如下:html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 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\'></fecolormatrix></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 3、腾讯网的做法: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */ } </style> 其他的一些方法: 1.网页黑白代码外部样式(写入*.css文件请用) html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 2.网页黑白代码内部样式(写入头部head标签里面) <style type="text/css"> <!-- html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} --> </style> 3.网页黑白代码内联式(写入html标签,找到html)
就一句代码,极客世界的小编收藏的,简单实用,希望能帮到大家。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论