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

伊凡·翁

結果

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

問題

針對性風格
目前風格

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

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

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

解決方案

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

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

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

應用 CSS 過濾器後

完美的結果!

導航選單

分享

保持聯繫!

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

更多讀物

關於備份 WordPress 網站您需要了解的一切

在當今的數位時代,網站很容易受到駭客攻擊、伺服器崩潰和意外刪除,備份 WordPress 網站不是一種選擇,而是一種必需。失去你的... 閱讀更多

香港最佳 16 家新創公司 CMS

還在選擇 CMS?以下列出了 16 個最適合您的新創公司在香港發展的 CMS。

最大化潛在客戶轉換:提高轉換率的策略

了解潛在客戶轉換並實施有效的策略來提高轉換率對於任何尋求最大化收入和成長的企業至關重要。

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

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

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