頁面整體黑白

一般在清明節，全國哀悼日，大地震的日子，以及一些影響力很大的偉人逝世或紀念日的時候，身為站長的我們都會讓自己的網站的全部網頁變成灰色(黑白色)，以表示我們對逝者的悼念。那么今天小編就說說，通過幾行簡單的代碼，來實現這個功能。

變成哀悼模式后 圖片文字視頻都會要求變成灰色

研究了一下其源代碼，發現針對html有如下樣式

filter 有11個參數：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur (px) 高斯模糊，單位是像素。如：blur(5px)

drop-shadow (h-shadow v-shadow blur spread color) 陰影，如：drop-shadow(8px 8px 10px red);

hue-rotate (deg) 色相，值表示角度（0-360）

以下數值均為百分比(%)

以下三個以100%為基準，即無變化，往上為增 ，往下為減。

brightness: 明度

contrast: 對比度

saturate: 飽和度

以下四個范圍為（0~100%）

grayscale: 灰度

invert: 顏色反轉，類似底片效果

opacity: 透明度

sepia: 棕褐色，類似老照片效果

url: 函數接受規定 SVG 濾鏡的 XML 文件的位置，并且可以包含指向特定濾鏡元素的錨點。實例：filter: url(svg-url#element-id)

如果某些帶有Flash的頁面仍顯示彩色，或瀏覽器上下滾動條拖動時Flash FLV播放器變花（例如劍網3、劍俠世界官網分流頁），將Flash改為JS輸出（本例為SWFObject）

<script type="text/javascript" src="/js/swf.js"></script> <div id="video_content"></div> <script type="text/javascript"> <!-- var video_player_so = new SWFObject("video-542.swf", "sotester", "439", "246", "7"); video_player_so.addParam("wmode", "opaque"); video_player_so.addParam("allowfullscreen","true"); video_player_so.addParam("allowscriptaccess","always"); video_player_so.write("video_content"); //--> </script>

這樣，整個頁面，包括Flash播放器中的視頻就都變灰色了。

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的<object …>和之間插入：
代碼如下:

<param value="false" name="menu"/> <param value="opaque" name="wmode"/>

經過項目測試，下面這段代碼可以接機大部分問題：

html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 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=1); -webkit-filter: grayscale(1);}

關于 css 的 filter:grayscale 哀悼模式 參考
https://blog.csdn.net/bigbear00007/article/details/101641038?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%93%80%E6%82%BC%E9%A1%B5%E9%9D%A2%E5%8F%98%E7%81%B0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-101641038.nonecase&spm=1018.2226.3001.4187

總結

以上是生活随笔為你收集整理的css 的 filter:grayscale 哀悼模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。