2022年12月1日，本站首頁已經(jīng)變成了黑白配色。

我的小網(wǎng)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 一行代碼，讓網(wǎng)頁變?yōu)楹诎着渖?

一行代碼，讓網(wǎng)頁變?yōu)楹诎着渖?/h1>

時(shí)間：2023-10-07 02:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-07 02:00:01 來源：網(wǎng)站運(yùn)營

一行代碼，讓網(wǎng)頁變?yōu)楹诎着渖?h2 data-first-child>背景

讓網(wǎng)頁變?yōu)楹诎着渖?，是個(gè)常見的訴求。而且往往是突如其來的訴求，是無法預(yù)知的。當(dāng)發(fā)生這樣的需求時(shí)，我們需要迅速完成變更發(fā)布。

2022年12月1日，本站首頁已經(jīng)變成了黑白配色。

我的小網(wǎng)站首頁也變成了黑白配色：

一行代碼

這一行代碼是個(gè)CSS代碼：

filter: grayscale(1)為了使整個(gè)網(wǎng)頁生效，你可以把它放在 <html> 標(biāo)簽的樣式里。為了更好的兼容性，你可以補(bǔ)一個(gè)帶 -webkit- 前綴的樣式，放在 filter 后面。例如：

<style>html { filter: grayscale(1); -webkit-filter: grayscale(1);}</style>你也可以用內(nèi)聯(lián)樣式，只要沒用 important CSS 語法，內(nèi)聯(lián)樣式優(yōu)先級最高：

<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">...</html>

原理

我們使用了 CSS 特性 filter，并用了 grayscale 對圖片進(jìn)行灰度轉(zhuǎn)換，允許有一個(gè)參數(shù)，可以是數(shù)字（0到1）或百分比，0% 到 100% 之間的值會(huì)使灰度線性變化。

如果你不想完全灰掉?？梢栽O(shè)置個(gè)相對小的數(shù)字。

兼容性

我們使用了 CSS 特性 filter，兼容性還是不錯(cuò)的：

為了更好的兼容性，最好加一個(gè)前綴 -webkit-，例如：

filter: grayscale(.95);-webkit-filter: grayscale(.95);

filter 樣式加到 <html> 還是 <body> 上

我的小網(wǎng)頁是把 filter 樣式加到了 <body> 元素上。通常這沒有問題。

<body style="filter:grayscale(1);-webkit-filter:grayscale(1)">...</body>但如果你的網(wǎng)頁內(nèi)有「絕對和固定定位」元素，一定要把 filter 樣式加到 <html> 上。

原因見: https://drafts.fxtf.org/filter-effects/#FilterProperty

引用：

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.
翻譯：

若 filter 屬性的值不是 none，會(huì)給「絕對和固定定位的后代」創(chuàng)建一個(gè) containing block，除非 filter 對應(yīng)的元素是「當(dāng)前瀏覽上下文中的文檔根元素」（即<html>）。
因此，兼容性最好的方法是把 filter 樣式加到 <html> 上。這樣不會(huì)影響「絕對和固定定位的后代」。

這里小程序有個(gè)坑，如果你的頁面代碼有「絕對和固定定位的后代」，就不能把 filter 樣式 加到 <page> 上，而是要找個(gè)元素，這個(gè)元素沒有「絕對和固定定位的后代」，你可以把 filter 樣式加到這個(gè)元素上。

寫在最后

我是HullQin，公眾號「線下聚會(huì)游戲」的作者（歡迎關(guān)注公眾號，聯(lián)系我，交個(gè)朋友），轉(zhuǎn)發(fā)本文前需獲得作者HullQin授權(quán)。我獨(dú)立開發(fā)了「聯(lián)機(jī)桌游合集」，是個(gè)網(wǎng)頁，可以很方便的跟朋友聯(lián)機(jī)玩斗地主、五子棋、象棋、UNO等游戲，不收費(fèi)無廣告。喜歡可以關(guān)注我噢～我有空了會(huì)分享做游戲的相關(guān)技術(shù)。



關(guān)鍵詞：黑白,配色

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉