現(xiàn)在越來越多的網(wǎng)站都開始使用黑白風(fēng)格，這種簡潔、清晰的設(shè)計(jì)風(fēng)格能夠給人一種清新脫俗的感覺，同時(shí)也方便用戶在大量信息中快速找到自己所需要的內(nèi)容。

那么，如何將一個(gè)常規(guī)的彩色網(wǎng)站變成黑白網(wǎng)站呢？其實(shí)只需要一些簡單的 CSS 兼容性設(shè)置就可以實(shí)現(xiàn)。

/* 將所有顏色都設(shè)為黑白 */
body {
filter: grayscale(100%);
}
/* 排除部分元素，避免其受到 filter 影響*/
img, video {
filter: none;
}
/* 鼠標(biāo)懸浮時(shí)，圖片變成原來的顏色 */
img:hover, video:hover {
filter: none;
}
/* 給黑白圖像添加一些顏色 */
a, a:hover {
color: #333;
}
/* 處理表格中的邊框 */
table, td {
border-color: #ccc;
}

上面的代碼片段基本可以實(shí)現(xiàn)黑白網(wǎng)站的效果。其中，filter: grayscale(100%);將所有顏色都設(shè)為黑白，filter: none;取消部分元素的顏色限制，a, a:hover {color: #333;}則給黑白圖像添加了一些顏色，并且通過對(duì)表格的邊框顏色進(jìn)行設(shè)置，使得黑白的網(wǎng)站看起來更加美觀。

需要注意的是，某些瀏覽器可能無法兼容filter屬性。此外，如果你的網(wǎng)站中包含大量圖片，那么在 CSS 中單獨(dú)為每個(gè)圖片設(shè)置兼容性代碼顯然不夠可行。這時(shí)候，僅通過改變圖片的class屬性，就能夠?qū)崿F(xiàn)圖片變成黑白效果，并在鼠標(biāo)懸浮時(shí)恢復(fù)原有顏色。

最后，值得一提的是，你可以根據(jù)自己的具體需要，自由地修改上面的 CSS 代碼，來達(dá)到最優(yōu)的黑白風(fēng)格效果。