title: 如何網頁變成灰色素調
date: 2020-04-04 23:31:42
tags: [Hexo,建站]
categories: [建站]
先來看幾個效果圖
- layui社區
- 騰訊首頁
- CSDN
- 百度首頁(忘記截圖)
實踐 - 照貓畫虎
- 先找點HTML頁面最好有文字有圖片,或者自己隨意寫幾個,這裏從網上下載一個簡單頁面來演示。隨意下載一個模板網頁,先來預覽下未修改前的樣式:
- 素調 - 方式一:在CSS添加以下代碼
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter: none;
}
效果預覽:
- 素調 - 方式二:CSDN方式,也在html標籤加入。
html {
-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);
}
備用:
<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}
</style>
效果預覽:
- 素調 - 方式三:騰訊。定義全局樣式,在body上引入樣式:
.garyBody {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
}
效果預覽:
- 其它方式。
比如grayscale.js或者http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11-v2/,瀏覽器大safari、Chrome、Firefox、IE、edge的兼容性,請自行測試。
總結
素調方式大同小異,應該都是遵循微軟的濾鏡。至於你問我爲什麼能夠在0點準時換裝,我猜想一個是過早獲知消息、定時作業、人工作業兩套圖片樣式、批量下架、而且有的也不是定時完成,比如遊戲,有的次日00:12都還不能登錄,估計運維睡了,晚點手動操作下。😄
最後附一張天地失色
- 萬物回春
: