How do you create a half solid, half semi transparent gradient background image with cross browser support?

I have a div, and I would like to create a background for it in the in the following manner. The top half must be a solid colour, and the bottom half a semi transparent colour?

How do I go about creating this?开发者_高级运维 making it work in all the major browsers? without splitting up the div into two separate ones.

I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.

Can someone please point me in the correct direction? or suggest some alternatives? all help is greatly appreciated. Thanks.

Use a transparent PNG as the background image. Make it very large but thin so you can tile it.

I am being told this cannot be done but there must be some kind of dirty, hackerish way to do it.

Three words: IE6.

If you can get it to work there, you can get it to work anywhere!

I would suggest writing an on-the-fly image creator that creates just the right transparent image for the page and renders it in such a way that IE6 supports the transparency of the image. You could certainly use almost any language that supports image manipulation or command-line callout to do that, it just won't be fast. Then you could use that generated image to achieve your goals.

That would be a dirty hackerish way to do it.

I also would shower twice with bleach after writing such an abomination. But that's just me.