溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何修改CSS樣式實現網頁灰色，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
第一、網頁黑白代碼樣式A第一種：修改CSS文件
我們可以在網頁的CSS文件中添加以下的CSS代碼，來實現網頁黑白色，也就是網站變灰
CSS代碼
網頁黑白代碼樣式A
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}也推薦這種代碼網頁黑白代碼樣式B
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>這里我們可以將代碼添加到HEAD模板中，要實現全站才可以。
第二種：在網頁的<head>標簽內加入以下代碼
如果你不想改動CSS文件，你可以通過在網頁頭部中的<head>標簽內部加入內聯CSS代碼的形式實現網站網頁變灰
代碼
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>第三種：修改<html>標簽加入內聯樣式
如里上面的兩種方式都不喜歡，可以通過修改<html>標簽，以加入內聯樣式的方法，達到網頁變灰的效果
代碼
<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- */
}這里，我們根據實際的需要選擇添加到代碼中。
看完了這篇文章，相信你對“如何修改CSS樣式實現網頁灰色”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
