<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 

  
      
    

          

	
          
		
          
			
          
				
          網(wǎng)站都變成灰色了，它是怎么實現(xiàn)的？
          
				
           2023-1-3      前端達人      
          
			
          
			
          
				
          
    大家好，我是二哥呀。

          

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

          

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

          

          
    這是 CSDN 的 

          

          
    這是 B站的 

          

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

          

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

          

          
    方案 2，用魔法！

          

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

          

          
     

          

          
    我把它復(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 程序員進階之路》，定位到 HTML 標簽，此時可以看到頁面是正常的顏色。

          

          
     

          

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

          

          
     

          

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

          

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

          

          
     

          

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

          

          
     

          

          
    然后依次試一下 60%：

          

          
     

          

          
    100%：

          

          
     

          

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

          

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

          

          
    大致的意思就是，grayscale 是一個 CSS 函數(shù)，可以把圖像轉(zhuǎn)成灰色，參數(shù)是個百分比，結(jié)果返回一個 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ù)，可選項還有以下這些：

          

          
     

          

          
    可以看到，目前的主流瀏覽器版本都支持 grayscale 函數(shù)，比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

          

          
     

          

          

          
    沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不系之舟。
          

          

          
    轉(zhuǎn)自 csdn
          

          
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。           

          

          
    
          
           

          

          
    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
          

          

          
           

          

          
    藍藍設(shè)計( www.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

          

          
    
          

          

          
    
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設(shè)計的小編
          http://www.sdgs6788.com
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          





久久久网中文字幕|
久久青青草原国产精品免费|
97超级碰碰碰碰久久久久|
亚洲精品国产美女久久久|
久久久久亚洲av成人网人人软件|
久久久久亚洲AV综合波多野结衣|
久久综合欧美成人|
久久精品国产99国产精品澳门|
久久亚洲欧美国产精品|
人妻无码αv中文字幕久久|
日本欧美久久久久免费播放网|
俺来也俺去啦久久综合网|
久久99国产亚洲高清观看首页|
伊人色综合久久天天|
精品水蜜桃久久久久久久|
久久亚洲2019中文字幕|
波多野结衣AV无码久久一区|
久久人人妻人人爽人人爽|
久久天堂电影网|
久久无码人妻精品一区二区三区
|
久久国产精品-久久精品|
99久久99这里只有免费费精品|
91精品国产乱码久久久久久|
伊人久久大香线蕉精品|
久久久久亚洲av毛片大|
久久这里只有精品首页|
久久久久亚洲Av无码专|
国产成人久久精品麻豆一区|
亚洲国产精品一区二区三区久久|
18岁日韩内射颜射午夜久久成人
|
久久99热国产这有精品|
久久本道久久综合伊人|
国产69精品久久久久9999APGF
|
成人国内精品久久久久一区|
久久91这里精品国产2020|
久久夜色精品国产亚洲|
久久久中文字幕|
亚洲av伊人久久综合密臀性色|
精品久久久久久无码中文野结衣
|
久久精品国产亚洲一区二区三区|
久久久久久国产a免费观看黄色大片
|