<-- IE錯誤修正 --> 如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 一週前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學

Click the image to open in full size.

上個月台灣發生震驚社會的宜蘭普悠瑪列車出軌事故,造成許多旅客輕重傷甚至死亡,也對台灣交通運輸安全打上一個大大的問號,各種資訊隨著時間不斷被揭露出來,讓我懷疑需要多好的運氣才能平安度過每一天?發生憾事後再多道歉和賠償也無法撫平傷痛,或許平常就該認真謹慎面對所有大小事情,扣除天災更多的是人禍,往往都是過於疏忽怠慢、不夠嚴謹造成的。



幾天後臺灣鐵路局(簡稱臺鐵)將官方網站改為黑白兩色的灰階色系,首頁刊出「為亡者哀悼,為傷者祈福」字樣,想起這幾年每當有重大事故發生時,都會將網頁改為黑白顯示,亦能讓大家謹記這個事件以為警惕。

Click the image to open in full size.

站在技術宅的角度,會想知道要怎麼讓網頁快速轉成黑白色顯示?其實研究了一下也不會太困難,透過 CSS 濾鏡(CSS filter)就能做到,而且只需要將簡單幾行程式碼加入樣式表即可,雖不希望有人會用到這功能,但或許還有其他用法,就直接把程式碼放在文章中留給使用者自行研究。

使用教學

STEP 1

直接開啟網站的 .css 樣式表,在 html 部分套入以下這幾個樣式設定:

.gist table { margin-bottom: 0; }
如果沒有使用樣式表的話也能稍微改寫一下直接放入網站程式碼的 中,看起來像下面這樣:

.gist table { margin-bottom: 0; }
STEP 2

原有的網頁是彩色顯示。

Click the image to open in full size.

當加入幾行灰階的 CSS 濾鏡特效後,整體網頁就會變成黑白顯示,無論是鏈結或圖片的色彩都會轉為不同濃度的黑色、灰色或白色。

Click the image to open in full size.

喜歡 如何讓網頁變成黑白?使用 CSS Filter 套用濾鏡樣式表教學 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
CSS Lint - 線上 CSS 檢測工具,讓你的樣式表更正確精簡 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-06-30 02:58 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 09:19 PM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2018,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2