0

I have two divs, one above the other. In the foreground div, I have a transparent image of a certain dimension; and in the background div, a colored image.

I want to be able to save the transparent image in a way that it also 'saves' the underlying (background) image (since the foreground image is transparent). I know this can be done using canvas but I would like to know if it's possible to do it without using canvas because it doesn't always work with non-image elements (e.g. object).

Dennis
  • 309
  • 1
  • 6
  • 17
  • I think this is not possible without canvas. Maybe you want to combine the images with PHP to create one new image? Check out this: http://stackoverflow.com/questions/1394061/how-to-merge-transparent-png-with-image-using-php – derdida Aug 12 '14 at 17:35
  • I think what you are describing is exactly what the jquery adaptive background (https://github.com/briangonzalez/jquery.adaptive-backgrounds.js) and others such as color thief (http://lokeshdhakar.com/projects/color-thief/) do. The only problem is that both of them use canvas with images. But just as derdida, I don't think it is possible without using canvas... Can you give us an example of using this on an object instead of an image? A few use cases in html? – Marc Lainez Aug 12 '14 at 17:43
  • Thanks for the ideas and suggestions. What I'm really trying to do is to take a 'screenshot' of a Flash object within a div. There are no existing plugins that does this directly. The Flash object that I am interested in is a TwitchTV embed object (http://jsfiddle.net/ychggfvc/). The colored overlay div is a makeshift transparent image. – Dennis Aug 12 '14 at 18:42

1 Answers1

1

Try using something like:

#foregroundDiv{
   height:100px;
   width:100px;
   background:url(../path/foregroundimage.png);
}

#backgroundDiv{
   height:200px;
   width:200px;
   background:url(../path/backgroundimage.png);
}

<div id="backgroundDiv">
  <div id="foregroundDiv"></div>
</div>

I assume you already have made the foreground div as a proper png (or gif) that has a transparent background.

Also, you may have to play around with the CSS (positioning in particular) but the key here is that your foreground div must have an explicit size (if your image is being set as background) otherwise, it will default to the size of the elements within itself (so zero if none).

Here is a fiddle: http://jsfiddle.net/vj699zd4/

Also, you can add spunk to the css such as:

#backgroundDiv:hover{
   background:#777777;
   /*or...*/
   /*background:url("../new/background.png");*/
   /*or...*/
   /*opacity:0.75;*/
}

Spunk fiddle: http://jsfiddle.net/0wbxxg08/

Matthew Peters
  • 1,861
  • 2
  • 14
  • 16