Colorize Background-Image

根據rgb-Value的不同，我需要爲便利貼圖像着色（像這個here）。Colorize Background-Image

我的問題如下：圖像的外部部分需要透明，因爲圖像放置在不同的背景顏色前面。

其次，我需要圖像的當前黃色改變爲給定的rgb值。（不是動畫）

我首先想到了使圖像的黃色部分也是透明的，並且在它之外放置了彩色元素。但是這會使外部部分着色，並且應該堅持文檔背景顏色。

有關於此的任何想法？

由於提前， Woyzeck

2012-12-30 Woyzeck

圖像如何着色？它是否會動態完成（例如通過帶有顏色滑塊的窗體）？或者它會靜態地完成（PageA將有一個藍色的圖像，PageB將有一個綠色的圖像等）？ – cimmanon

頁面上有很多貼子。它們中的每一個都從服務器獲取color-rgb值。你在問什麼？ – Woyzeck

您可以通過着色的<canvas>元素繪製的圖像做到這一點。（例如，請參閱here），然後生成可用於顯示圖像的數據URI。

不知道這可以通過使用純CSS來實現，但我很樂意被證明是錯誤:)

2012-12-30 18:53:20

嗯，我想你可以總是有這些圖像中的四個（白色，紅色，綠色和藍色），然後重疊它們（使用智能z-索引 - 底部爲白色），同時播放RGB後 - 其「不透明度值」創建自定義顏色...我想這會工作（並且會是100％的CSS！）。但你的答案更簡單。 :-) – mbinette

@mbinette好點！這可能也會起作用。如果你用JavaScript處理它，可能不會太麻煩。 –

感謝您快速的建議！

我相信他們會工作。但我遇到了另一個很好的解決方案，適用於我here。

完全的CSS，但它當然不會像我之前嘗試使用的圖像。

2012-12-31 00:40:14 Woyzeck

回答