用於着色圖像的顏色選擇器（HTML，CSS，網頁）

我試圖找到一個很好的解決方案來使用一個圖像，但使用CSS/HTML或輕量級應用濾鏡或色調在圖像頂部。用於着色圖像的顏色選擇器（HTML，CSS，網頁）

例如，

enter image description here

理想情況下，我想在網頁只使用1個圖像，並且只是放置一個透明的過濾器/圖像頂部基於顏色選擇器在一旁，但還沒有完成過這樣的一面。

謝謝

來源

2015-02-23 Niles

請出示您的蘇到目前爲止的代碼。 – 2015-02-23 19:19:55

你應該找這樣的：https：//developer.mozilla.org/en-US/docs/Web/CSS/filter – 2015-02-23 19:21:03

我不會爲你編碼它，而是指出你在正確的方向。

用CSS3過濾器從這裏開始 - >http://css-tricks.com/almanac/properties/f/filter/

這將告訴你如何使用過濾器，圖像和改變顏色，只要你想。

接下來爲您的顏色選擇器，你會做一些sorta javascript，當一個特定的顏色被挑選它會改變該圖像的類。喜歡的東西...

document.getElementById("MyElement").className = "MyClass";

或

document.getElementById(id).style.property=new style

使用類似

<button onclick="yourColourPickerFunction()">Click me</button>

希望這有助於

來源

2015-02-23 19:24:30 floor

該解決方案是相當哈克，但它也可以在瀏覽器中不支持Internet Explorer 11或者CSS3的過濾器火狐22

.outer { 
 
    width: 150px; 
 
    height: 100px; 
 
    background: url("http://stocksnap.io/img-thumbs/960w/5QWUZ3XYGE.jpg"); 
 
    background-size: 100%; 
 
} 
 
#inner1 { 
 
    width: 150px; 
 
    height: 100px; 
 
    background: rgba(180,0,0,0.4); 
 
} 
 
#inner2 { 
 
    width: 150px; 
 
    height: 100px; 
 
    background: rgba(0,0,180,0.4); 
 
}

<div class="outer"> 
 
    <div id="inner1"> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div id="inner2"> 
 
    </div> 
 
</div>

來源

2015-02-23 19:33:47 ByteHamster

用於着色圖像的顏色選擇器（HTML，CSS，網頁）

回答

相關問題