如何用css将页面变成灰色教程!

html-css083

如何用css将页面变成灰色教程!,第1张

为方便站点哀悼,特提供css滤镜代码,以表哀悼。以下为全站CSS代码。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}

使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head>之间插入:

<style>

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}

</style>

有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的<html>替换为以上代码。

有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入:

<param value="false" name="menu"/>

<param value="opaque" name="wmode"/>

最简单的把页面变成灰色的代码是在head 之间加

<style type="text/css">

html {

FILTER: gray

}

</style>

一般的discuz论坛在 你的控制css 文件下修改

/images/header/header.css 这个文件

下面是最大限度兼容所有浏览器的代码:

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+xmlutf8,<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)

}

方法1:用传统的方法将网站变成黑白色非常的麻烦,需要更换页面的文件,并且要对图片进行更改。但如果自己的网站支持CSS的话,一切变得很简单。只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分过滤掉。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}(不换行)

方法2:有个方法可以迅速把你的网站变成灰调,就是给body加个css滤镜。body {filter:gray}既然说了是css滤镜,那么只能是在IE下支持了。firefox下浏览照样还是彩色的。并且有一点,flash里的图片不会变灰。

方法3:今天访问好多网站包括百度,启点等网站都变成了黑白色界面,体现大家对于四川地震的深切哀悼,但有好的站长不一定知道是什么方法,还以为是大量改版,对于任何人都不是很轻松的事,特将本站的解决方法告诉大家。

国务院发出公告,将2008年5月19日至21日定为全国哀悼日,以表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼。各网站为了表示这个悲惨的日子,特将网站色调统一变成黑白色,特将此方法告诉大家,让大家联合起来。

如果你的页面css是直接写在页面里的,只要在body的样式最后加入body{... fileter:gray} 如果是下面的方式加载的<link href="style.css" rel="stylesheet" type="text/css" />你可以找到body样式,加入filter:gray即可实现。