將整個網站頁面變成灰色(黑白色)


將整個網站頁面變成灰色(黑白色)

有些時候我們需要把網站頁面變成黑白色或灰色,特別是對於一些需要悼念的日子,以及一些影響力很大的偉人逝世或紀念日的時候,都會讓網站的全部網頁變成灰色(黑白色),以表示我們對逝者或者英雄的緬懷和悼念。通過參考資料,總結出以下幾個方法可以幫助我們達到目的:
方法一:
<style type="text/css">
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>


filter是濾鏡的意思,filter:gray的意思就是說給頁面加上一個灰度的濾鏡,所以html里面的所有內容都會變成黑白的了。不過這個濾鏡對於chrome和safari瀏覽器是無效的,所以下面會有一行-webkit-filter: grayscale(100%);這個樣式是專屬於使用webkit內核的瀏覽器的,意思和FILTER: gray;差不多,只是寫法不同罷了。

方法二:

下面這段代碼可以變網頁為黑白,將代碼加到 CSS 最頂端就可以實現素裝,如果網站沒有使用 CSS,可以在網頁/模板的 HTML 代碼和 之間插入:

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

有一些網站 FLASH 動畫的顏色不能被 CSS 濾鏡控制,可以在 FLASH 代碼的和之間插入:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM