動態更改圖片顏色

-3

我有一個.png或.jpeg圖像。根據選擇的主題，我想更改圖像的顏色（以前可能是白色，我想將其更改爲紅色）。我怎樣才能做到這一點。動態更改圖片顏色

2016-12-22 Saroj Jena

爲什麼你需要爲這個圖像（你就不能使用CSS）？否則，看看CSS濾鏡，你可能可以調整圖像的色調，但我懷疑這不是你想要的。 – series0ne

在這種情況下，你需要改變圖像本身的主題 –

實際上，我們正在使用我們的網站材料設計，所以在同一圖像，我們想要不同的情況下不同的顏色（如懸停，點擊，點擊等） –

你可以嘗試這樣的：

img#theImage { 
     filter: hue-rotate(90deg); 
}

你有不同的度值進行試驗，它會從圖像到圖像的理想後什麼不同，所以不會，但它是親如你會得到與HTML/CSS/jQuery。

來源

2016-12-22 09:26:02 Eamonn

過濾器屬性實際上做了什麼。 –

它應用了一個過濾器，有一大堆不同的過濾器，但是這個過濾器特別是編輯色調。有關詳細信息，請參閱：https：//developer.mozilla.org/en/docs/Web/CSS/filter – Eamonn

色調偏移不會**會改變已灰度圖像的顏色。 – Eamonn

您可以通過

做它的形象
變化的頂部添加<div>標記它的不透明度爲0.5或更低
改變它的使用上點擊

JS顏色

我在下面添加了一個片段。

document.getElementById("green").addEventListener("click",function(){ 
 
document.getElementById("canvas").style.backgroundColor = "green"; 
 
}); 
 
document.getElementById("red").addEventListener("click",function(){ 
 
document.getElementById("canvas").style.backgroundColor = "red"; 
 
}); 
 
document.getElementById("blue").addEventListener("click",function(){ 
 
document.getElementById("canvas").style.backgroundColor = "blue"; 
 
});

img{ 
 
    width:200px; 
 
    height:200px; 
 
    z-index:900; 
 
    } 
 
#canvas{ 
 
    width:200px; 
 
    height:200px; 
 
    opacity:0.3; 
 
    z-index:999; 
 
    position:absolute; 
 
    } 
 
button{ 
 
    float:right; 
 
    /*margin-top:200px;*/ 
 
    margin-right:10px; 
 
    }

<div id="canvas"></div> 
 
<img src="https://i.stack.imgur.com/wwy2w.jpg" id="image"> 
 

 
<button id="green">green</button> 
 
<button id="red">red</button> 
 
<button id="blue">blue</button>

來源

2016-12-22 09:39:06

動態更改圖片顏色

回答

相關問題