在 WordPress 中僅使用 1 行 CSS 來變更 PNG 圖片的顏色

伊凡·翁

結果

僅使用 CSS 即可變更 PNG 圖片的顏色。

問題

針對性風格
目前風格

如果我可以使用像 Photoshop 這樣的工具將來源影像更改為白色,那麼挑戰會更容易。

然而,所有頁面都有一個白色背景的頂部導覽欄,而且 WordPress 一次只接受一個徽標,因此使用照片編輯工具來更改徽標的顏色不是一個可行的想法。

這讓我除了 CSS 之外什麼都沒有了。

解決方案

經過一番搜索後, CSS過濾器 似乎是最好的方法。

來自 MDN 網路文檔的定義
.header-image { 過濾器:亮度(0)飽和(100%)反轉(100%)棕褐色(0%)飽和(1%)色調旋轉(149deg)亮度(103%)對比(101%); }

我也用過這個 濾色片發生器 提出我需要的程式碼,在我的例子中只是純白色。

應用 CSS 過濾器後

完美的結果!

導航選單

分享

保持聯繫!

我只會發送好東西,不會發送垃圾郵件,不會發送廢話,我保證!

更多讀物

WordPress 成為您部落格之旅終極選擇的 10 個理由

部落格已成為個人和企業與世界分享想法、觀點和經驗的流行方式。它使人們能夠與有相似經歷的人建立聯繫...... 閱讀更多

使用 CMS 最大限度地發揮網站的潛力:初學者指南

內容管理系統(CMS)已成為網站管理的重要工具。隨著網站的複雜性不斷增加以及頻繁更新的需要,CMS 提供了一個用戶友好的介面... 閱讀更多

釋放發展的力量:如何促進成長和進步

發展是任何領域、產業成長和進步的重要面向。它涉及一個持續改進和創新的過程,以取得更好的結果。無論是在... 閱讀更多

您可以信賴的 WordPress 開發人員。

我始終以信任為基礎與客戶建立關係。我希望看到你像我一樣成長。讓我們共同努力發展您的業務。

取得免費報價
分享給...