網站都變灰了，幾行代碼可以實作-有解無憂

前言

這兩天，我們經常逛的好多網站、app首頁都變灰了，原因大家應該都知道了

網站變灰

①B站
這是B站
②愛奇藝
這是愛奇藝
③ 騰訊視頻
這是騰訊視頻
④ csdn
這是csdn
⑤百度
這是百度

怎么實作的呢？

難道這些網站開發商在網站開發的時候都準備一套灰色主題的UI么？
好奇心的驅使下，開始瘋狂的詢問度娘，果真還是找到了這么一個網站，

①官方檔案地址
【https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter】

網站這個頁面對CSS屬性 filter 的用法做了詳細介紹，這里截取幾個重要部分出來，對filter屬性感興趣的小伙伴可以在以上官網查看詳細內容
② 簡介

CSS屬性 filter 將模糊或顏色偏移等圖形效果應用于元素，濾鏡通常用于調整影像、背景和邊框的渲染，

③ 語法格式

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

④ 樣例
在這里插入圖片描述

來看看網站有沒有用CSS filter

我們打開B站首頁，然后f12 呼出開發者工具，發現確實有如下樣式

html.gray {
    filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    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=.85);
    -webkit-filter: grayscale(.85) saturate(.8);
}

在這里插入圖片描述

找到了樣式，那么接下來我們拿個人小破站【www.xiezhrspace.cn】試試效果

沒添加CSS樣式的樣子
在這里插入圖片描述

添加CSS樣式之后
在這里插入圖片描述
好家伙，還真變成全灰的了

CSS樣式兼容性

個人試了谷歌瀏覽器、火狐瀏覽器都是可以通過以上CSS樣式實作網頁變灰的，IE親測不行，
下面是官方給出的各個瀏覽器兼容情況
兼容性

原以為很難實作的功能，原來只需要幾行代碼就實作了，

本期內容就到這了，我們下期再見(●'?'●)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552856.html

標籤：Html/Css

上一篇：CSS 實作磨砂玻璃樣式

下一篇：返回列表