html 图片灰色,网站变灰色兼容代码包括图片支持所有浏览器

一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。那么下面分享几种方法

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:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}

或下载的代码，推荐上面的代码

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,#grayscale");

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

}

3、腾讯网的做法：

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- */

}

其他的一些方法：

1.网页黑白代码外部样式(写入*.css文件请用)

html {

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);

}

2.网页黑白代码内部样式(写入头部head标签里面)

3.网页黑白代码内联式(写入html标签，找到html)

就一句代码，脚本之家的小编收藏的，简单实用，希望能帮到大家。

html 图片灰色,网站变灰色兼容代码包括图片支持所有浏览器相关推荐

老板：你也把咱们网站弄成灰色——网站变灰色如何实现
从昨天下午开始,我们打开各种网站后都是灰色的,我们讲解一下如何用技术手段使网页变灰色. //分析:我们网站的元素大多数都是img标签和其他文字行标签,文字我们直接使用color:#ccc就可以更改,图 ...
4月4日网站变灰色的效果是怎么实现的？
4月4日时,很多网站包括主页和内容(包括图片.按钮等)也都已经变成了灰色.当天我打开的csdn.人人视频都全部变为了灰色. 我当时第一想法是难道把这些图片都换了一遍吗???但是成本未免太高,且可能会有 ...
怎么让网站变灰色，我们该怎么做？
全国哀悼日,我们会让网站全站灰色,以表示对逝者的悼念. 腾讯网的做法: <style> body *{ -webkit-filter: grayscale(100%); /* webkit ...
“网站变灰”的代码实现
网站变灰为了表示哀悼,当天很多网站把主页和内容都变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等. CSDN&&爱奇艺&&百度等实现: html.gray {- ...
使网页变灰的代码(包括FLASH等所有网页元素).
使网页所有元素变灰的代码:把下面的代码加入网站的CSS文件中第一种方法: html{ filter:progid:DXImageTransform.Microsoft.BasicImage(gray ...
java实现图片滚动_怎么用Java代码使图片自行滚动浏览
图片循环滚动代码和图片无缝滚动代码先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
设计图片转为html css,html2canvas 将代码转为图片_html/css_WEB-ITnose
最近,我通过众成翻译学习和翻译了一系列优秀的文章,许多文章都值得向大家推荐.但是,好的技术文章通常都有大段的代码.一般情况下,这并没有什么问题,因为不论是众成翻译.我的博客或者是其他转载技术类文章 ...
php如何适应360兼容模式,jquery不支持的浏览器有哪些,360浏览器兼容模式怎么设置...
jquery不支持的浏览器有哪些jQuery不支持哪些浏览器,jquery不支持的浏览器有IE6.IE7.IE8,这些低版本的IE浏览器在jQuery的新版本已经不兼容了.如果项目需要兼容IE低版本, ...
html的filter兼容性,网站黑白效果网站变灰色（兼容IE和主流浏览器）JS+CSS网站整站变黑白效果-css的 filter属性（Chrome内核）...
最新文章 https: open weixin qq com 有这个的账号,给客户开通微信小程序不需要认证费直... https: open weixin qq com 有这个的账号,给客户开通微信小 ...

html 图片灰色,网站变灰色兼容代码 包括图片 支持所有浏览器

html 图片灰色,网站变灰色兼容代码 包括图片 支持所有浏览器相关推荐

最新文章

热门文章

html 图片灰色,网站变灰色兼容代码包括图片支持所有浏览器

html 图片灰色,网站变灰色兼容代码包括图片支持所有浏览器相关推荐