背景顏色透明背景圖像在css

Question

我可以把一個背景圖像與特定的股市與css與background: url(dump.gif);例如。如果說gif是透明的，我可以將背景顏色應用於它帶有css的。說我點擊一個按鈕，一個命令運行只改變透明圖像的背景，該圖像被嵌入到一個更大的div。

想象玻璃被包埋成一個更大的div和如所描述的被設置，作爲CSS背景。任何能夠改變它的背景的方法。

「不」可以作爲答案，至少我會停止想知道。

編輯：增加jsfiddle。如果格拉斯有誤導性，請點擊小提琴。

http://jsfiddle.net/v4yfdkmf/

基本上其中所述移動加載圖像。我想用這段代碼改變它的背景。

Answer 1

您可以使用Javascript生成一個像素base64編碼圖像，而不是將其設置爲第二個背景。檢查Fiddle或看看下面：

function encodeHex(s) { 
 
    s = s.substring(1, 7); 
 
    if (s.length < 6) { 
 
     s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2]; 
 
    } 
 
    return encodeRGB(
 
    parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16)); 
 
}; 
 

 
function encodeRGB(r, g, b) { 
 
    return encode_triplet(0, r, g) + encode_triplet(b, 255, 255); 
 
}; 
 

 
function encode_triplet(e1, e2, e3) { 
 
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
 
    enc1 = e1 >> 2; 
 
    enc2 = ((e1 & 3) << 4) | (e2 >> 4); 
 
    enc3 = ((e2 & 15) << 2) | (e3 >> 6); 
 
    enc4 = e3 & 63; 
 
    return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); 
 
}; 
 

 
function generatePixel(color) { 
 
    return "data:image/gif;base64,R0lGODlhAQABAPAA" + color + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="; 
 
}; 
 

 

 
var imageDiv = $('.big_div'); 
 
var originalImage = imageDiv.css('background-image'); 
 
$('.change_color').on('click', function (e) { 
 
    var hex = $('#color_hex').val(); 
 
    var color = encodeHex(hex); 
 
    var data = generatePixel(color); 
 
\t imageDiv.css({ 
 
     'background-image': originalImage + ', url(' + data + ')' 
 
    }); 
 
});

.big_div { 
 
    background: url('http://info.eps.surrey.ac.uk/logos/transbugs.gif') no-repeat center center; 
 
    background-size: 160px 100px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="big_div"></div> 
 
<fieldset> 
 
    <legend>Pick color:</legend> 
 
    <p> 
 
     <label for="color_hex">Hex color:</label> 
 
     <input id="color_hex" type="text" placeholder="#ccc" /> 
 
    </p> 
 
    <p> 
 
     <button class="change_color">Change color</button> 
 
    </p> 
 
</fieldset>

對於編碼我要感謝給this Fiddle顏色，找不到作者的名字。

Answer 2

您可以使用畫布API進行此操作。 （也https://developer.mozilla.org/en-US/docs/Canvas_API/Tutorial/Pixel_manipulation_with_canvas/見）

像他們使用它們的顏色逆變器你可以做一些事情：

var img = new Image(); 
img.src = 'your pic source'; 
img.onload = function() { 
    draw(this); 
}; 

function draw(img) { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0); 
    img.style.display = 'none'; 
    var imageData = ctx.getImageData(0,0,canvas.width, canvas.height); 
    var data = imageData.data; 

你現在有與圖像的顏色數組。
然後在函數中編寫一些代碼來循環顯示像素，並在白色（或其他任何默認的gif背景顏色）時基本上進行更改。

然後繪製畫面與ctx.putImageData(imageData, 0, 0);

希望這是你的意思。