如何使用十六進制爲圖像着色？

我有一個圖標，我想以任意的十六進制數字顯示。圖標示例如下，但由於顏色可以是任何東西，我如何通過提供HTML顏色來使它變爲顏色？背景必須透明，因爲它將成爲地圖上的一個精確位置。有關如何完成此任何想法？如何使用十六進制爲圖像着色？

enter image description here

2012-05-14 TruMan1

看起來像這些示例圖像沒有固定的背景色。你有沒有透明的？ – Magnus

也許RGBA＆border-radius可以提供幫助嗎？看看這個： http://stackoverflow.com/questions/2293910/css3-transparency-gradient 和邊界半徑很酷的東西： http://border-radius.com/ – avasin

Here是我會使用的方法。

您需要從該圖像沒有顏色的版本開始 - 只需要輪廓，總線和漸變所需的黑色和白色。您需要漸變具有alpha透明度，以便某些像素比其他像素透明 - 然後您可以將任何顏色放在圖像後面，顏色也會改變。成功！

問題是，這會溢出銷的邊界，你會失去覆蓋地圖的能力，所以你需要找到一種方法來剪輯背景物品，以便它的確切形狀銷釘並且在該邊緣之外是透明的。

你可以嘗試創建一個簡單的形狀相同的SVG圖像並放在它後面。我以前this tool創建這個橙色的圓：

<?xml version="1.0" standalone="no"?> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<ellipse cx="200" cy="190" rx="30" ry="30" style="fill:orange"/> 
</svg>

隨着一點點的工作，你也許能夠得到的形狀，當你把它背後的透明形象，以配合您的腳，然後，所有你需要做的是使用Javascript或不會將文本從「fill：orange」更改爲任何你想要的顏色。

另一個類似的方法是使用畫布元素來繪製該形狀。您也可以嘗試通過CSS邊框四捨五入來旋轉以創建該形狀，具體取決於您的瀏覽器支持。這裏是一個CSS生成的引腳接近你所需要的形狀，但還沒有應用：（顯然，代碼是特定的webkit）

<div style="background-color: blue; -webkit-transform: rotate(-45deg); width:100px; height:100px; border-radius: 50px 60px 50px 0;"></div>

如果你想要做的東西，會在較舊的瀏覽器，你可以創建一堆長度各不相同的高1px的div，以創建與透明引腳大小完全相同的東西。

<div class="constructedPin"> 
    <div style="width: 8px"></div> 
    <div style="width: 12px"></div> 
    <div style="width: 30px"></div> 
    <div style="width: 35px"></div> 
    <div style="width: 38px"></div> 
    <div style="width: 40px"></div> 
    <div style="width: 41px"></div> 
       (etc...) 
</div> 

<style> 
div.constructedPin div { height: 1px; background-color:whatever; margin: auto;} 
</style>

然後，它是一個簡單的事情，改變div的背景顏色。這種方法聽起來很複雜，但不會太難，而且實際上可以非常快速地加載，因爲您可以對div進行硬編碼，不會即時生成，而且CSS更新的速度會更快。

我被帶走並做了一個小演示。很顯然，如果你有一個真實的圖像，它會更好 - 我只是很快擦除了它的顏色，以實現這個想法。

http://jsfiddle.net/eNfak/8/

來源

2012-05-14 23:36:35 brentonstrine

我不認爲這是可以使用CSS來實現客戶端 - 我使用創建一個具有指定顏色的位圖（可能的緩存結果的服務器端功能），然後從HTML調用它：

<img src="createicon.ashx?name=truck&color=0xff0000">

原始位應該使用預先定義的顏色爲背景 - 讓我們說紅了，沒有任何紅色部分在非背景區域，那麼你的代碼應該查找所有紅色像素和代表用一定比例的新背景顏色對它們進行綁定，以適應原始像素中紅色的百分比 - 例如如果原始像素爲50％紅色，並且您的新顏色爲藍綠色，則像素應該變爲50％藍綠色。請參閱here瞭解如何更改位圖上的顏色。

來源

2012-05-14 20:49:43 MiMo

這聽起來像一個乾淨和優雅做法。 C＃庫上的任何想法或一種方式來做到這一點？我的意思是，我應該從什麼圖像開始，使它能夠着色到其他十六進制數？ – TruMan1

您可以使用內置的「Bitmap」對象 - 我在答案中添加了一個鏈接和更多的細節。 – MiMo

如何使用十六進制爲圖像着色？

回答

相關問題