网站迅速变黑与白灰色的4种方式

2021-02-21 18:31 jianzhan

1般在清明节,全国性悼念日,大地震的生活,和1些危害力很大的名人去世或留念日的情况下,身为站长的大家都会让自身的网站的所有网页页面变为灰色(黑与白色),以表明大家对逝者的哀悼。那末天地数据信息网编就说说,根据几行简易的编码,来完成这个作用。

第1种:改动CSS文档

大家能够在网页页面的CSS文档中加上下列的CSS编码,来完成网页页面黑与白色,也便是网站变灰

CSS编码

html {

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

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

第2种:在网页页面的<head>标识内添加下列编码

假如你不想修改CSS文档,你能够根据在网页页面头顶部中的<head>标识內部添加内联CSS编码的方式完成网站网页页面变灰

编码

<style type="text/css">

html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</style>

or

 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} 

有1些站长的网站将会应用这个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>更换为以上编码。

第3种:改动<html>标识添加内联款式

如里上面的两种方法都不喜爱,能够根据改动<html>标识,以添加内联款式的方式,做到网页页面变灰的实际效果

编码

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);">

第4种:自己用的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的滤镜来操纵网页页面的显示信息罢了,唯1不一样的就CSS编码启用的方法。各位,喜爱哪样就自身挖去吧!