2

Here's a related image: What I want to achieve is on the right.

I want to achieve something like what's pictured on the right side of my image. But I also have a parent container that has a background image of its own, instead of a solid color.

Any advice?

EDIT: Forgot to add, cross-browser compatibility is important. (Or atleast Firefox).

4 Answers4

5

I can only think of one pure CSS solution and it is simply insane.

Let's say your image has a width of 100px. You'll have to create a div that's 100px wide and give it 100 children that are each 1px wide, that each have the same background (positioned accordingly) and that each have an opacity from 0 (the first child) to .99 (the last child).

Personally, I think it's crazy and I'd never use this method.

Rory O'Kane came with a nice and clean solution and I also have another idea which involves JavaScript.

Basically, the idea is that you use a canvas element (support), draw your image on it, loop through its pixels and adjust the alpha for each.

demo

(scroll down to see the result)

Relevant HTML:

<div class='parent'>
  <canvas id='c' width='575' height='431'></canvas>
</div>

Relevant CSS (setting the background image on the parent)

.parent {
  background: url(parent-background.jpg);
}

JavaScript:

window.onload = function() {
  var c = document.getElementById('c'), 
      ctxt = c.getContext('2d'), 
      img = new Image();
  
  img.onload = function() {
    ctxt.drawImage(img, 0, 0);
    var imageData = ctxt.getImageData(0, 0, 575, 431);
    for(var i = 0, n = imageData.data.length; i < n; i += 4) {
      imageData.data[i + 3] = 255*((i/4)%575)/575;
    }
    ctxt.putImageData(imageData, 0, 0);
  };
  /* images drawn onto the canvas must be hosted on the same web server 
  with the same domain as the code executing it */
  /* or they can be encoded like in the demo */
  img.src = 'image-drawn-on-canvas.jpg';
};
Community
  • 1
  • 1
Ana
  • 35,599
  • 6
  • 80
  • 131
  • Welp, guess I have to figure out something else then. These are probably the only ways I could do this, but it's not what I'm looking for. Thanks anyways. –  Sep 30 '12 at 15:20
1

check these out maybe helpful

DEMO 1

DEMO 2

Afshin
  • 4,197
  • 3
  • 25
  • 34
  • I couldn't get the DEMO 1 to work on Firefox (Forgot to mention it on OP, but Firefox compatibility is important and preferably cross-browser too. I'll edit it in), and in DEMO 2, if you set body's background to some random image, it'll show you that the tag isn't infact fading to transparency,but instead white. –  Sep 30 '12 at 00:45
  • then you have to use demo 2 or other ways that i don't know – Afshin Sep 30 '12 at 00:57
1

Ignoring possible CSS-only methods, you can make the image a PNG with the transparent gradient built in to the image’s alpha channel. All browsers support PNG transparency, except for IE 6 and below. Here’s what your sample image would look like as a PNG with a transparent gradient (try putting this image against other backgrounds):

PNG image with transparent gradient

If the images are user-submitted so you can’t add the gradient ahead of time, you could create and store a gradient-added version of each image at the time that the user uploads them.

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
  • What possible CSS only methods? :) I can only think of one and that is completely *INSANE* = make a lot of child divs having the same background with different opacities from 0 to 1. – Ana Sep 30 '12 at 06:59
  • @Ana I don’t have any CSS-only methods in mind. By “possible” methods I just mean that I can’t think of any off the top of my head, but I haven’t researched the subject enough to say that there definitely aren’t any. – Rory O'Kane Sep 30 '12 at 09:02
  • 1
    In case anyone’s wondering, here’s how I made the transparent gradient in the image: I opened [the sample image](http://i.stack.imgur.com/Acped.png) in Adobe Photoshop CS5. I cropped the image down to the original image on the left. I clicked the [“Add layer mask” button](http://i.imgur.com/MfQ5F.png) in the Layers panel. I used the [Gradient Tool](http://i.imgur.com/fF2nc.png) to draw a linear gradient from black at the left border to white at the right border (holding Shift to keep the angle horizontal). Finally, I exported a PNG-24 from File > Save for Web & Devices. – Rory O'Kane Sep 30 '12 at 09:17
  • I'm a huge fan of CSS-only solutions, but in this case, I personally would go for your solution or a JavaScript one (using `` & changing the alpha of pixels). – Ana Sep 30 '12 at 11:36
  • 1
    What do you mean by "create and store a gradient-added version of each image at the time that the user uploads them."? Sadly, they are going to be user-submitted, so using Photoshop for each one isn't an option :) –  Sep 30 '12 at 14:02
  • 2
    @И- To create the modified image after the user uploads the original, you would have to write a server-side image-editing function to do that for you. The function would use an image-editing library such as [ImageMagick](http://www.imagemagick.org/script/index.php) (with the appropriate wrapper for your language, e.g. RMagick if your app is in Ruby). When the server recieves the uploaded image, it would pass the image data to your custom gradient-adding function, then store the modified image in a separate binary field in the database or a separate file on your filesystem. – Rory O'Kane Oct 01 '12 at 01:23
  • 2
    ImageMagick can [draw gradients](http://www.imagemagick.org/Usage/canvas/#gradient) and [use custom images as masks](http://www.imagemagick.org/Usage/compose/#copyopacity). To add the transparency gradient, you would first draw a gradient from black on the left to white on the right in a new image with the same dimensions as the original. Then you would apply that gradient image as the mask. – Rory O'Kane Oct 01 '12 at 01:36
1

CSS only method:

https://gist.github.com/3750808

Harry
  • 52,711
  • 71
  • 177
  • 261