简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

用CSS將網頁變成黑白

php中世界最好的语言
發布： 2018-03-21 17:10:20
原創
4400 人瀏覽過

這次帶給大家用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 …>和之間插入：

<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中文網其它相關文章！

推薦閱讀：

CSS的Selector使用詳解

詳解CSS之margin的特殊使用技巧

以上是用CSS將網頁變成黑白的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css 黑白
來源：php.cn
上一篇：用CSS將網站變成黑白 下一篇：css3的移動屬性
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
JavaScript：RegExp.escape 函數是否存在？ 我只想用任何可能的字串創建一個正規表示式。 varusersString="Hello?!*`~World()[]";varexpression=newRegE...
來自於 2023-11-16 17:41:27
0
2
232
WordPress 6.0 (add_editor_style) 不會在古騰堡編輯器中載入 style.css 我正在學習UdemyWordPress課程來建立自訂WordPress區塊主題。我成功在function.php中註冊了區塊類型，並且可以在古騰堡編輯器中選擇我的區塊。教學建議使用...
來自於 2023-11-12 20:37:50
0
2
261
標題重寫為：Dynamic component import in Vite with React and typescript causing failure in fast refresh 我正在嘗試建立一個多步驟表單，我將資料放在一個單獨的檔案中，用於這樣的常數從「react」匯入{lazy}；exportconststeps=[{id:0,name:'Person...
來自於 2023-11-10 20:45:29
0
1
505
Vue 開發工具中元件旁邊的效能數字是多少？ 有人對Vue開發工具中的某個功能有見解或資源嗎？在元件窗格上，它顯示了我的元件，然後是這些紅色和黃 色的小方塊，以及我假設的元件的效能。當我第一次載入應用程式時，它們不會出現，但例...
來自於 2023-11-09 14:46:48
0
1
305
嘗試安裝 Laravel Breeze 時遇到 Laravel Mix 錯誤 我正在嘗試在我的新Laravel應用程式中安裝LaravelBreeze。一切都工作正常，但是當在控制台中輸入npmrundev時，我不斷收到此錯誤：子編譯中存在3個警告（分別使用...
來自於 2023-11-07 23:05:02
0
1
299
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！