如何實現網頁變灰效果_網站蒙灰CSS樣式總彙

在每一個特定或者特殊的日子裡，幾乎所有的網站都變成了灰色，那麼這種效果是怎麼實現的呢？

今天就來簡單的實現一下這樣的效果。

添加以下全局CSS樣式，可以實現此效果：

代碼一：

<code>
html
 {
  
-webkit-filter
: 
grayscale
(
100%
);
filter
:progid:DXImageTransform.Microsoft.
BasicImage
(graysale=
1
);
} 
-- 可以是整個網站變成灰色的  
--
>/<code>

實現網頁顏色變灰這個效果，非常簡單：

<code>
filter
: grayscale(
100%
);
/<code>

這樣一段代碼即可實現，放在html和body的css屬性裡即可實現。

意思是修改所有的顏色為黑白 (100% 灰度):

灰色網站會加入這段代碼，你可以按F12，把這段源碼刪除，即可變成彩色

代碼二：

<code>
html
 { 
   
filter
:progidXImageTransform.Microsoft.
BasicImage
(grayscale=
1
); 
}/<code>

使用方法：這段代碼可以變網頁為黑白，將代碼加到CSS最頂端就可以實現素裝。建議全國站長動起來。為在地震中遇難的同胞哀悼。

如果網站沒有使用CSS，可以在網頁/模板的HTML代碼

和 之間插入：

<code>
<
style
>

   
html
{
     
filter
:progidXImageTransform.Microsoft.
BasicImage
(grayscale=
1
);
  }
style 
>
/<code>

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

<code>  
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"
>
/<code>

請將網頁最頭部的替換為以上代碼。

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

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

最簡單的把頁面變成灰色的代碼是在head 之間加

<code>
 
<
style
 
type
=
"text/css"
>
 
html
 {
   
FILTER
: gray
}
style
>
/<code>

代碼三：

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

總結：

以上幾種代碼（方法），都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼及調用的方式。在css的修飾時還有權重問題，所以有時候css代碼不生效的時候可以考慮一下代碼的權重問題。

歡迎關注第一山，今後將有更多前端開發技術與大家共同交流學習。