html浅色_修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理

一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色)，以表示我们对逝者的悼念。那么今天就说说，通过几行简单的代码，来实现这个功能。

今天上午有网友提到希望将网站整体的色调换成灰色、黑色色调，这个记得在以前纪念一些日子的时候会有用到，以前脚本之家网站中也有使用的。记得那时候直接是修改CSS就可以实现，既然有用户需要，这里抽点时间再整理一下看看是否有其他更好的方法。

我们可以根据实际的需要选择合适的CSS代码样式添加到自己的网页模板的代码中实现网页灰色、黑白样式。

第一、网页黑白代码样式A第一种：修改CSS文件

我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰

CSS代码

网页黑白代码样式A

html {

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

-webkit-filter: grayscale(100%);

}

也推荐这种代码网页黑白代码样式B

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;

}

这里我们可以将代码添加到HEAD模板中，要实现全站才可以。

第二种：在网页的

标签内加入以下代码

如果你不想改动CSS文件，你可以通过在网页头部中的

标签内部加入内联CSS代码的形式实现网站网页变灰

代码

html {

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

-webkit-filter: grayscale(100%);}

第三种：修改标签加入内联样式

如里上面的两种方式都不喜欢，可以通过修改标签，以加入内联样式的方法，达到网页变灰的效果

代码

第四种：作者本人用的CSS代码

代码：

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

}

这里，我们根据实际的需要选择添加到代码中。

PS：以上几种方法，都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式。各位，喜欢哪种就自己挖去吧！

html浅色_修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理相关推荐

html页面变成黑白,修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到,早年老蒋在自己的博客中也有使用的.记得那时候直接是修改CSS就可以实现,既然有用户需要,老蒋这里抽点 ...
修改CSS样式实现网页变灰色/黑白代码的几个方法整理
今天上午有网友提到希望将网站整体的色调换成灰色.黑色色调,这个记得在以前纪念一些日子的时候会有用到.记得那时候直接是修改CSS就可以实现,既然有用户需要,这里抽点时间再整理一下看看是否有其他更好的方法 ...
修改css样式后刷新网页无改变
在调整页面样式时候,css改变,而页面未发生变化 1.ctrl+f5lai1更新页面 2.Ctrl+F5依然失败绝大多情况下跟每个浏览器自身的缓存机制有关.而且大部分这个情况是单页面项目,这个时候按 ...
做html时css经常无效果,修改CSS样式无效有什么原因？
修改CSS样式为什么会无效?原因是什么?下面本篇文章就来给大家介绍一下修改CSS样式无效的原因,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.HTML 标签未关闭这是版面设计 ...
javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
asp.net 动态修改css样式,ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C#动态修改CSS样式 wonsoft(wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个Butt ...
通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值修改某一元素的class名,使其被别的样式修饰修改某一属性的值 <!DOCTYPE html> <html> <h ...
设计网页字体css,CSS样式设计网页字体与用户体验
CSS样式设计网页字体与用户体验互联网发布时间:2009-04-02 19:36:06 作者:佚名我要评论网页制作Webjx文章简介:在设计网页时,没有比页面的外观更重要的了.所以 ...

html浅色_修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理

html浅色_修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理相关推荐

最新文章

热门文章