CODEWITHSUNDEEP
javascriptcss
user4065758
user4065758

Reputation: 319

Background Color to transparent background image in css

I can put a background image to a specific div with css with background: url(dump.gif); for example. If say that gif is transparent, can I apply a background color to it with css. Say I click a button and a command runs to change the background of the transparent image only, with that image being embedded into a bigger div.

enter image description here

Imagine the glass is embeded into a bigger div and is set as described, as css background. Any way of being able to change only it's background.

"No" is ok as an answer, at least I will stop wondering.

EDIT: added jsfiddle. If glas is misleading, click the fiddle.

http://jsfiddle.net/v4yfdkmf/

Basically where the moving loading image is. I want to change it's background with this code.

Upvotes: 4

Views: 1896

Answers (2)

skobaljic
skobaljic

Reputation: 9634

You can generate one pixel base64 encoded image using Javascript, than set it as second background. Check the Fiddle or look below:

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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    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);
	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>

For encoding the colors gotta thank to this Fiddle, could not find the author's name.

Upvotes: 1

Tim V.
Tim V.

Reputation: 36

You could use the canvas API for this. (see also https://developer.mozilla.org/en-US/docs/Canvas_API/Tutorial/Pixel_manipulation_with_canvas/)

You could do something like they use for their color inverter:

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;

You now have an array with the colors of the image.
Then write some code in the function to loop through the pixels and basically change it when it is white (or any other default background-color the gif has).

then draw the picture with ctx.putImageData(imageData, 0, 0);

Hope this was what you meant.

Upvotes: 2

Related Questions