今天全國哀悼日，手把手教你一段css讓全站變灰

表達全國各族人民對抗擊新冠肺炎疫情斗爭犧牲烈士和逝世通報的深切哀悼，國務院今天發布公告，決定2020年4月4日舉行全國性哀悼活動。在此期間，全國和駐外使館下半旗致哀，全國停止公共娛樂活動，4月4日10點開始，全國人民默哀3分鐘，汽車、火車、艦船鳴笛，防空警報鳴響。

想到以往默哀日訪問網站時發現整站會變成全灰，即想到如果立即開始開發、設計圖修改等工作也會消耗大量的時間與精力，那會不會有css可以直接處理所有的元素將他們變灰，隨即想到了css3的filter（濾鏡），并也證實了這一想法的可行性。

filter: grayscale 使用可以調整元素的灰度值

.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
復制代碼

實戰

以B站為例：

在正常的情況下B站這個導航欄滑到下面之后是fixed在頁面的頂部的

但假如你把這段css加到了body上會發生下面這種情況：

你可以發現它不再固定在頁面的頂部了，而是超出去了屏幕外面，屏幕左下角的小電視人也跑到了頁面上半部分去，為什么會發生這樣的情況呢？

我去Google查閱了相關資料，發現:

對于指定了 filter 樣式且值不為 none 時，被應用該樣式的元素其子元素中如果有 position 為 absolute 或 fixed 的元素，會為這些元素創建一個新的容器，使得這些絕對或固定定位的元素其定位的基準相對于這個新創建的容器。

我們可以聯想出fixed是相對于html根容器來定位的，如果在body上設置了filter則會創建一個新的定位基準，而頁面滾動時將body滾動出了屏幕外，則body內所有子孫元素的fixed將產生不符合預期的效果。

如何解決呢？

解決方案1

影響全站的方法我們可以將該樣式應用到根元素html上，即使創建了新的定位基準元素，也不會對子孫元素產生不符合預期的影響。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
復制代碼

效果：

解決方案2

非全站變灰我們可以將需要使用filter的元素單獨加上


<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>
復制代碼

兼容IE的辦法

很多小伙伴評論說IE低版本不支持該怎么辦于是我Google搜索了一下是有實現辦法的實現辦法是引入grayscale.js，Demo下載 grayscale.js Demo

簡單查看了該js的源碼后發現會將color、background-color、borderColor等屬性提取出來后替換成灰色，background-image和圖片會使用canvas繪制處理成灰色再替換成處理后的圖片源

demo內functions.js則是對判斷瀏覽器userAgent來識別瀏覽器類型與版本，做出對應的處理

參考資料地址：http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11/

小程序下的問題

微信小程序我嘗試加在page上但是fixed還是失效了，只能使用第二種方法去加樣式，大家如果有解決方案可以評論提出來大家一起討論一下~

CSS3 filter MDN 地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

么是 VitePress？

VitePress 是 VuePress 的下一代框架，是基于 Vue3+Vite 構建的靜態站生成器。

原先的 VuePress 是基于 Webpack 構建，本地啟動開發一個只有幾個簡單頁面的文檔站點需要等待的時間讓人難以忍受。即使是HMR熱更新也需要幾秒鐘的時間才能在瀏覽器中顯示出來。

從根本上說，這是因為 VuePress 是 webpack 的一個應用程序。即使只有兩頁，這也是一個完整的 webpack 項目(包括所有的主題源文件)正在編譯。當項目有很多頁面時，情況會變得更糟：每個頁面都必須先完全編譯，然后服務器才能顯示內容！

Vite 很好地解決了這些問題：幾乎立即啟動服務器，只按需編譯正在服務的頁面，以及閃電般的快速 hmr。所以基于 Vue3 和 Vite 的 VitePress 誕生了。

VitePress 的優勢

VitePress 是 VuePress 的下一代框架，所以它有 VuePress 的所有優點；
具有 Vite 的速度，開發服務器啟動快，熱更新快，構建快，只按需編譯正在服務的頁面；
利用 Vue 3 做的一些優化， JS 負載更容易解析，hydration 也變得更快。
容易上手，VitePress 更多的是主觀性的并且配置很少。
VitePress 是面向未來的：VitePress 僅適用于支持原生 ES 模塊導入的瀏覽器，鼓勵使用沒有經過轉換的原生 JavaScript 以及主題化中使用 CSS 變量。

總之，體驗舒適，性能好，才有競爭力。開源字節基于vitepress推出官方技術文檔，幫助大家做一些系統化的學習來提升自我的認知效率，從而提高我們的自我獨立性。

如若轉載，請注明出處：開源字節 https://sourcebyte.cn/article/107.html

號用于每日更新前端最新面試題，React、Vue、小程序、JavaScript、HTML5、CSS、uniapp、ES6、前端工程化、性能優化等熱點面試題~~~
歡迎關注，面試題刷起來~~升職加薪不是夢~~

以下是一些常見的前端面試題和答案，涉及 CSS 的主題：

請解釋一下 CSS 盒模型。
答案：CSS 盒模型是用來描述元素在頁面中占據空間的方式。它由內容區域、內邊距、邊框和外邊距組成。
請解釋一下 CSS 選擇器的優先級。
答案：CSS 選擇器的優先級是用來確定哪個規則應用于特定的元素。它由選擇器的特殊性、重要性和源代碼順序決定。
請解釋一下 CSS 清除浮動。
答案：清除浮動是一種技術，用于處理浮動元素引起的父元素高度塌陷的問題。常見的清除浮動的方法包括使用空元素清除浮動、使用 clearfix 類、使用偽元素等。
請解釋一下 CSS 偽類和偽元素的區別。
答案：CSS 偽類用于選擇處于特定狀態的元素，如:hover、:active；而偽元素用于創建元素的特定部分，如::before、::after。
請解釋一下 CSS 相對定位和絕對定位的區別。
答案：相對定位是相對于元素在正常文檔流中的位置進行定位，它不會影響其他元素的布局；絕對定位是相對于最近的已定位祖先元素進行定位，或者如果沒有已定位的祖先元素，則相對于初始包含塊進行定位。
請解釋一下 CSS 選擇器的子代選擇器和后代選擇器的區別。
答案：子代選擇器（>）選擇作為某個元素直接子元素的元素；后代選擇器（空格）選擇作為某個元素后代的所有元素，無論它們是直接子元素還是更深層次的子元素。
請解釋一下 CSS 中的層疊上下文（stacking context）。
答案：層疊上下文是指在 HTML 文檔中的一個三維概念，它決定了元素在 z 軸上的顯示順序和如何相互堆疊。層疊上下文可以通過特定的 CSS 屬性（如position、z-index）創建。
請解釋一下 CSS 中的浮動（float）屬性。
答案：浮動是一種布局方式，用于將元素從正常的文檔流中移動并使其根據浮動方向對齊。浮動元素會影響周圍元素的布局。
請解釋一下 CSS 中的盒子模型和內容溢出（overflow）屬性。
答案：CSS 盒子模型是用來描述元素的布局方式，內容溢出屬性用于控制當元素中的內容超過元素框時如何處理溢出的部分。
請解釋一下 CSS 中的媒體查詢（media queries）。
答案：媒體查詢是一種在 CSS 中使用媒體類型和特定條件來應用樣式的方法。它可以根據設備的特性（如屏幕寬度、像素密度等）動態地調整樣式。
請解釋一下 CSS 中的盒子陰影（box-shadow）屬性。
答案：盒子陰影屬性用于在元素周圍創建一個或多個陰影效果。它可以指定陰影的顏色、模糊半徑、偏移量等。
請解釋一下 CSS 中的動畫（animation）屬性。
答案：動畫屬性用于在元素上創建動畫效果。它可以定義動畫的關鍵幀、持續時間、延遲等屬性。
請解釋一下 CSS 中的彈性布局（Flexbox）。
答案：彈性布局是一種用于創建靈活的、自適應的布局的 CSS 模塊。它通過使用容器和項目的屬性來控制元素在主軸和交叉軸上的對齊和分布。
請解釋一下 CSS 中的網格布局（Grid）。
答案：網格布局是一種二維布局系統，用于將頁面劃分為行和列，并通過使用容器和項目的屬性來控制元素在網格中的位置和大小。
請解釋一下 CSS 中的響應式設計（Responsive Design）。
答案：響應式設計是一種設計方法，通過使用媒體查詢和流動布局等技術，使網站或應用能夠在不同的設備和屏幕尺寸上提供最佳的用戶體驗。
請解釋一下 CSS 中的變量（Variables）。
答案：CSS 變量是一種用于存儲和重用值的機制。它們使用自定義屬性（如 --color: red;）來定義，并通過 var() 函數在其他地方引用。
請解釋一下 CSS 中的漸變（Gradients）。
答案：漸變是一種在元素背景或文本中創建平滑過渡效果的方法。它可以是線性漸變（沿著一條直線方向）或徑向漸變（從中心向外擴散）。
請解釋一下 CSS 中的字體圖標（Icon Fonts）。
答案：字體圖標是使用字體文件來顯示圖標的方法。通過將圖標設計為字體字符，并將字體文件引入頁面，可以使用 CSS 控制圖標的樣式和大小。
請解釋一下 CSS 中的屏幕閱讀器隱藏（Screen Reader Hiding）。
答案：屏幕閱讀器隱藏是一種技術，用于將某些內容隱藏或屏蔽，以使屏幕閱讀器用戶不會聽到或感知到這些內容。
請解釋一下 CSS 中的響應式圖像（Responsive Images）。
答案：響應式圖像是一種優化圖像顯示的方法，使圖像能夠根據設備的屏幕尺寸和分辨率自動調整大小和加載適當的圖像版本。常見的實現方法包括使用 srcset 和 sizes 屬性。

在線咨詢

上一篇：python網絡數據處理之html2text模塊和readability模塊學習使用
下一篇：前端：JS延長加載的方式有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商