用CSS將網站變黑白

最後更新：2018-03-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來用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代碼的<object …>和</object>之間插入：

<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>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

用CSS將網站變黑白

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support