亚洲欧美日韩高清,日本玖玖精品资源,国产农村妇女精品一二区

網(wǎng)站都變成灰色了，它是怎么實(shí)現(xiàn)的？

2023-1-3 前端達(dá)人

大家好，我是二哥呀。

想必大家都感受到了，很多網(wǎng)站、APP 在昨天都變灰了。

先來感受一下變灰后的效果。

這是 CSDN 的

這是 B站的

這種灰色的效果怎么實(shí)現(xiàn)的呢？如何做到圖片、文字、按鈕都變灰的效果呢？

方案 1，換一套灰色的 UI，那顯然成本太大了，用腳指頭想一想就知道不太可能。

方案 2，用魔法！

不好意思，還真被你猜中了！在網(wǎng)頁端按下 F12，打開開發(fā)者模式，用元素選擇器定位到 HTML 標(biāo)簽上，在「樣式」的面板中往下翻，就可以看到這樣一段代碼。

我把它復(fù)制過來大家看一下。

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

打開二哥的網(wǎng)站《Java 程序員進(jìn)階之路》，定位到 HTML 標(biāo)簽，此時(shí)可以看到頁面是正常的顏色。

然后把之前的代碼添加到 HTML 上，然后就可以看到色系變成灰色了。

那這段代碼是什么意思呢？

直接把 filter grayscale 復(fù)制到搜索引擎里看一下。

當(dāng)參數(shù)為 0 的時(shí)候，顏色是正常的。

然后依次試一下 60%：

100%：

MDN 是怎么解釋 grayscale() 函數(shù)呢？

The grayscale() CSS function converts the input image to grayscale. Its result is a .

大致的意思就是，grayscale 是一個(gè) CSS 函數(shù)，可以把圖像轉(zhuǎn)成灰色，參數(shù)是個(gè)百分比，結(jié)果返回一個(gè) filter 函數(shù)。

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函數(shù)可以用來改變圖像的顯示效果，用于 CSS 的 filter 屬性。除了 grayscale 函數(shù)，可選項(xiàng)還有以下這些：