CSS如何將網站網頁變成灰色-css教學-PHP中文網

CSS如何將網站網頁變成灰色

小云云

發布： 2018-12-13 10:26:13

原創

5075 人瀏覽過

本文主要為大家介紹了關於利用CSS將網站網頁變灰色的相關資料，文中給出了詳細的範例程式碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧，希望能幫助大家。

CSS如何將網站網頁變成灰色

想要實現上圖灰色效果，方法如下：

這段CSS程式碼可以變網頁為黑白，將程式碼加到CSS最頂端就可以實現素裝。

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

登入後複製

如果你的頁面中沒有HTML標籤，記得加進去，可以加以下HTML5標籤，或是更換上面的CSS標籤的html為body或其它。

<!DOCTYPE html>
<html>
</html>

登入後複製

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的之間插入：

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

登入後複製

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

<script type="text/javascript" src="/js/swf.js"></script>
<p id="video_content"></p>
<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>

登入後複製

大家學會了嗎？趕快動手嘗試。