如何在透明圖像內使用彩色圖案

我試圖創建一個遊戲（中年概念），但我堅持在形成盾牌。我想每一個殖民地有自己獨特的盾牌，這將由包括：如何在透明圖像內使用彩色圖案

盾牌形狀（14種形狀）
模式（12種模式）
顏色（16×2種顏色，因爲每個模式將有2種顏色可供選擇）
符號（12個符號）

我用photoshop已經創建了盾的形狀。每個盾牌形狀都有其邊框，內外都是透明的。我的目標是每個用戶都能夠選擇圖案，他的盾牌的2種顏色和符號，這將代表他的派系。

還有就是要創建所有這些不同的組合，並通過使用CSS和jQuery把他們的一種方式，但這種做法將要求彩色圖案的數量龐大：

14周的形狀×12種模式X 16×2色= 5.376（至少有不同的彩色圖案）。

所以我的問題是：

我怎樣才能正確顯示圖像當有人點擊該圖標盾的？爲了通過點擊下面的一個較小的形狀來更改主屏蔽，我使用了下面的jquery代碼，但由於某些原因不明的原因，它不能在小提琴上工作，而它在我的本地服務器上正常工作。
```
jQuery(function($) { 
    $("#shield-1").click(function() { 
     $('.modal-shield img').attr('src',function(i,e){ 
      $(this).attr('src', "path/to-image/shield-1.png"); 
     }); 
    }); 
});   
```
我怎樣才能呈現屏蔽其自己的圖形內，根據每個不同的形狀？我可以在css上使用「溢出」選項，以填充內部透明部分，然後用jquery創建模式？
我該如何改變圖案的顏色？
有沒有辦法將圖像保存爲所有這些選項的結果，以便稍後顯示不同大小的屏蔽？

如果有可能，我想用CSS和jQuery，但如果這個選項是不可能的我可以使用SVG和jQuery？

PS。我創建了一個小提琴，但因爲我不知道如何將它包含在這裏，所以我會將它添加到我的下一個評論中。

來源

2016-08-04 NickD

這就是小提琴 https://jsfiddle.net/snart1/4ef46nro/3/ – NickD

你的問題太廣泛了，而且是堆棧溢出的主題。嘗試一個解決方案，如果您遇到問題，我們將在這裏提供幫助。 –

夠公平的... 我會嘗試一些我找到的解決方案，如果發生任何問題，我會回來。無論如何，我願意聽取任何建議或建議你相信會幫助我的同謀該項目.. – NickD

對於具有約問題＃1相同的問題任何人，我使用的以下更新jQuery代碼通過點擊形狀下方

jQuery(function($) { 
    $("[id^='shield-']").click(function() {  
     var mysrc = $(this).attr("src"); 
     $('.modal-shield img').attr('src',function(i,e){    
      $(this).attr('src', mysrc); 
     }); 
    }); 
});

改變主屏蔽當任何ID開頭「shield_」點擊，變量「 mysrc「獲取他的src屬性，然後將」modal-shield「img改爲」myscr「值。希望它能幫助某人...

來源

2016-08-05 22:31:58 NickD

如何在透明圖像內使用彩色圖案

回答

相關問題