幾行樣式代碼,讓你的網站全站和圖片都變成灰色|CSS樣式灰色代碼

目錄

方法一

方法二

方法三


如果需要將你的網站全站和圖片變灰,只需要加幾段css控制就可以了

效果展示

 

小編這裏試用了下面的幾種方法,一般用方法一的效果會更好一些,用其他的幾種方法,或多或少的原來網站的部分浮動的樣式或者點擊效果會失效,導致功能不能用了。

但是第一種方法的話,原來的網站樣式或者效果都還不會出現很大的問題,起碼我當時試的時候,沒有看到有問題的地方,大家也可以多多的嘗試一下,不同的幾種方法間的區別

 

方法一

<!--   可以將整個網站變成灰色的    --> 


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

 

方法二

html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
} 


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

<style  type="text/css">
html {
    filter: progidXImageTransform.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> 

 

方法三

 <style type="text/css">
 * {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }
    img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
    }
</style>

參考文章:

https://www.cnblogs.com/zhengyan/p/4726896.html

感謝原作者的分享,讓技術人能夠更快的解決問題

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章