亚洲综合在线一区二区三区-日韩超碰人人爽人人做人人添-麻豆国产精品久久人妻-无码人妻丰满熟妇啪啪-天堂精品一区二区三区-99久久综合狠狠综合久久aⅴ

×
新網 > 建站推廣 > 正文

特殊時期網站都變成了灰色,是怎么做到的?

  • 作者:sfcs
  • 來源:互聯網
  • 瀏覽:100
  • 2020-04-09 16:16:55

昨天打開各個網站,發現網頁都變成灰色了。今年國家經歷了非常慘痛的時刻,有很多烈士英雄保衛人民的安危遇難,昨天全國下降半旗,北京時間 10 點全國默哀三分鐘,來致敬英雄們。為了深切哀悼在抗擊新冠肺炎斗爭中的犧牲烈士和逝世同胞,4月4日0點起,全國多家網站和移動端,比如百度、優酷、愛奇藝、嗶哩嗶哩、抖音、快手、斗魚和CSDN等平臺給出公告稱:2020年4月4日全國性哀悼活動期間,停止今天一切公共娛樂活動。

昨天打開各個網站,發現網頁都變成灰色了。今年國家經歷了非常慘痛的時刻,有很多烈士英雄保衛人民的安危遇難,昨天全國下降半旗,北京時間 10 點全國默哀三分鐘,來致敬英雄們。為了深切哀悼在抗擊新冠肺炎斗爭中的犧牲烈士和逝世同胞,4月4日0點起,全國多家網站和移動端,比如百度、優酷、愛奇藝、嗶哩嗶哩、抖音、快手、斗魚和CSDN等平臺給出公告稱:2020年4月4日全國性哀悼活動期間,停止今天一切公共娛樂活動。

隨便打開這些任何一個網站,全站的內容都變成了灰色,包括按鈕、圖片等等。相信這時候從事程序開發的粉絲可能會好奇這是怎么做到的呢?
其實解決方案很簡單,只需要幾行代碼就能搞定了。從事前端開發的朋友會以為所有的內容都統一換了一個 CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統一換成了灰色樣式。如下圖,有一個灰色樣式:[filter: grayscale(100%);],也許就是這一個樣式控制著整個網頁顯示效果。
現在試著關掉這個樣式,會發現整個csdn頁面恢復了往常的紅色主題,包括網站logo、圖片和按鈕都恢復了。
總結上面的實驗效果,果然是這個樣式在起作用,而且是全局的效果,因為它是作用在了 html 這個節點之上的。只要修改這部分CSS代碼:
html {  webkit-filter: grayscale(100%);  filter: grayscale(100%);}
當然這種修改CSS的方式還有很多,我們可以在Mozilla發布的樣式效果測試平臺上看看 filter 這種不同層疊樣式效果。

平臺地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
通過這幾個用力可見通過 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%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;

設置一種函數,方法如下:
filter: <filter-function> [<filter-function>]* | none

如果對層疊樣式感興趣的朋友可以閱覽下官網的說明文檔:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

除了這些開發樣式調整的方法以外,還可以走系統架構角度解決網頁的顯示問題,通常很多大型網站都用上了反向代理nginx服務器,所有網站訪問,都要通過nginx代理去訪問到網頁內容。
既然這樣,統一在nginx服務器上做一些配置也是可行的,之前某大神的博客說“在Nginx負載均衡服務器上,利用sub_filter指令在輸出的HTML中增加一行如下代碼:
<style type="text/css">html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }</style>

nginx配置修改效果如下:

73.jpg

免責聲明:本文內容由互聯網用戶自發貢獻自行上傳,本網站不擁有所有權,也不承認相關法律責任。如果您發現本社區中有涉嫌抄襲的內容,請發送郵件至:operations@xinnet.com進行舉報,并提供相關證據,一經查實,本站將立刻刪除涉嫌侵權內容。

免費咨詢獲取折扣

Loading
主站蜘蛛池模板: 国产精品永久免费| 大伊香蕉精品视频在线| 伊伊人成亚洲综合人网| 国产午夜福利不卡在线观看| 亚洲国产韩国欧美在线| 国产亚洲精品久久久久的角色| 日韩资源在线一区二区三区| 中文幕无线码中文字夫妻| 欧美精品v国产精品v日韩精品| 日本强伦片中文字幕免费看| 嫩草国产福利视频一区二区| 98视频精品全部国产| 精品无码久久久久久久久久| 人人妻人人做从爽精品| 国产精品人妻一区夜夜爱| 国产亚洲人成a在线v网站| 丰满岳乱妇在线观看中字无码| 日本丰满熟妇hd| 国产亚洲精品拍拍拍拍拍| 国产真实乱对白精彩久久老熟妇女 | 中文字幕日韩精品一区二区三区| 亚洲色爱图小说专区| 色综合久久精品亚洲国产| 亚洲中文字幕无码久久2018| 亚洲av无码码潮喷在线观看| 男女乱婬真视频| 国产精品va在线播放| 欧美高大丰满freesex| 好吊妞国产欧美日韩免费观看| 久久精品国产清高在天天线| 久久亚洲精品ab无码播放| 精品水蜜桃久久久久久久| 中文av无码人妻一区二区三区| 亚洲成a人片在线观看中文| 亚洲国产高清在线一区二区三区 | 亚洲精品综合欧美一区二区三区 | 军人粗大的内捧猛烈进出视频| 97人人超碰国产精品最新| 中国白嫩丰满人妻videos| 香蕉久久av一区二区三区| 无码国产福利av私拍|