修改CSS样式实现网页灰色(没有颜色只有浅色黑白

家电维修 2023-07-16 19:17www.caominkang.com家电维修技术

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

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

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

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

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

CSS代码
 

网页黑白代码样式A

html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-ebkit-filter: grayscale(100%);
}

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


html {
-ebkit-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);
-ebkit-filter: grayscale(100%);}

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

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

代码


 

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

代码

body {
-ebkit-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:gray; 
}

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

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

Copyright © 2016-2025 www.jianfeikang.com 建飞家电维修 版权所有 Power by