how to make div semi-transparent without affecting the content

Forum Moderators: not2easy

Message Too Old, No Replies

how to make div semi-transparent without affecting the content

jorntk

7:43 am on Apr 14, 2004 (gmt 0)

i have a div in blue color. i want it to become semi-transparent so can see bg picture.

i have try use opacity however, the words inside the div become semi transparent as well.

so, how can i produce something like website below, where can div is semi tranparent without but the word is not.

[csszengarden.com...]

Please help.

Thanx!

Bonusbana

7:51 am on Apr 14, 2004 (gmt 0)

Use a .png image file. png supports 256 alpha gradients, but some browsers have a problem displaying them correctly (like IE5/win). Google .png for more info.

jorntk

11:09 am on Apr 14, 2004 (gmt 0)

so where should i do with the png. use it as bg image or div image.

i think they dont use png to produce the effect, because we can see they only use gif and jpg.

pls correct me if im wrong. can u describe in detail how to produce the effect?

thanx.

katana_one

12:56 pm on Apr 14, 2004 (gmt 0)

Most of the effects you are seeing on csszengarden are accomplished using opaque gifs and jpgs. The transparency you are seeing in most cases is an image created in an image editor like Photoshop, which is then sliced up and carefully applied and positioned as background images to the different DIV tags in the HTML via the CSS file.

Rambo Tribble

1:13 pm on Apr 14, 2004 (gmt 0)

A simple trick to get partial transparency of the background is to simply make a 10x10 px .GIF with every other pixel transparent. Then use that as your background for your div.

jorntk

6:16 pm on Apr 14, 2004 (gmt 0)

ya, create a tranparent gif is a good idea. but usually by using photoshop, we can only create a gif that transparent to oene or selected color(if i am not mistake).

for my case, the bg image has plenty color, so how to make a gif that is semi-transparent(say 50%) to all color?

Pls give me a guide or tell me url that show how to do this.

Thanx!

Rambo Tribble

6:41 pm on Apr 14, 2004 (gmt 0)

If yours is a large graphic with many colors, I doubt there will be an easy way to use the GIF trick to achieve partial transparency. You could, however, try making a layer with every other pixel transparent and the visible pixels a color not used in your graphic. Overlay and merge it with your graphic, then apply transparency to specific color of the overlay pixels.

choster

7:17 pm on Apr 14, 2004 (gmt 0)

how to make a gif that is semi-transparent(say 50%) to all color?

It is impossible. The GIF format only supports bit transparency, i.e. a pixel is either transparent or a color with no in between.

As Bonusbana notes, the PNG format supports what is called alpha transparency, with 256 levels of transparency. However, Internet Explorer does not support this functionality except through hacks.

Incidentally, the CSS Zen Garden site you cited does not use partial transparency. You can see by loading [csszengarden.com...] , [csszengarden.com...] or [csszengarden.com...] individually that these files were rendered in a graphics program and exported; the layering effect is not generated by the browser.

rainborick

9:08 pm on Apr 14, 2004 (gmt 0)

If you're content to use CSS transparency, then the problems are managable. Try the following example (with full!DOCTYPE, of course):


<style type="text/css"><!-- body { width:100%; height:100%; z-index:0; background-image:url(http://www.namelesssite.com/images/logo.gif); background-repeat:no-repeat; background-position: center center; }
.cellContainer { position:relative; z-index:10; width:60%; height:200px; margin-left:20%; font-family:arial,helvetica,sans-serif; font-size:18px; }
.cellBackground { position:absolute; left:0; top:0; width:100%; height:200px; z-index:10; background-color:#c08000; -moz-opacity:.5; filter:alpha(opacity=50); }
.cellBody { position:absolute; left:10px; top:20px; width:100%; height:180px; z-index:11; } --></style>
</head>
<body>
<h1 align="center">Layers Upon Layers</h1>
<div class="cellContainer">
 <div class="cellBackground">
 </div><!-- end cellBackground -->
 <div class="cellBody"><p><b>I gotcher Lorem Ipsum right here, fella!</b></p>
 </div><!-- end cellBody -->
</div><!-- end cellContainer -->

The only issues are: (1) the heights of the DIVs. Not my strong suit, so I used absolute heights to get compatibility with MSIE, and (2) CSS transparency is not universally supported. You get MSIE v5.5+, NS7 and the Gecko browsers, but I don't know about the others.

choster

10:43 pm on Apr 14, 2004 (gmt 0)

It'll work, but it won't validate.

-moz-opacity is proprietary Mozilla-only pseudo-CSS.
filter is proprietary IE-only pseudo-CSS.

I am no standards Nazi, however. In the business world, if it works, it works... :)

though if I were I'd also advise you not to encapsulate your CSS inside comment tags ( ) if you are using an XHTML doctype, as this will cause an XML parser to ignore your styles :)