目錄
如果需要將你的網站全站和圖片變灰,只需要加幾段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
感謝原作者的分享,讓技術人能夠更快的解決問題