【HTML】讓網站變成灰色的辦法

時間 2020-04-23

標籤 HTML 網站變成灰色辦法欄目 HTML 简体版

原文原文鏈接

通常在清明節，全國哀悼日，大地震的日子，以及一些影響力很大的偉人逝世或記念日的時候，身爲站長的咱們都會讓本身的網站的所有網頁變成灰色（黑白色），以表示咱們對逝者的悼念。那麼今天就說說，經過幾行簡單的代碼，來實現這個功能。css

第一種：修改CSS文件

咱們能夠在網頁的CSS文件中添加如下的CSS代碼，來實現網頁黑白色，也就是網站變灰html

CSS代碼web

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

第二種：在網頁的<head>標籤內加入如下代碼

若是你不想改動CSS文件，你能夠經過在網頁頭部中的<head>標籤內部加入內聯CSS代碼的形式實現網站網頁變灰svg

代碼網站

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

orurl

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);}

有一些站長的網站可能使用這個css 不能生效，是由於網站沒有使用最新的網頁標準協議 spa

<!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>替換爲以上代碼。firefox

第三種：修改<html>標籤加入內聯樣式

如裏上面的兩種方式都不喜歡，能夠經過修改<html>標籤，以加入內聯樣式的方法，達到網頁變灰的效果code

代碼orm

<html style="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代碼調用的方式。各位，喜歡哪一種就本身挖去吧！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。