dhtml layer with semi-transparent bg

Dear All,

I would like to create a dhtml layer with semi-transparent bg. I have tried to use of the following in the "style" section of the <div>:
filter: alpha (opacity=50)

but I found the effect will apply to all object within the layer..(i.e. text, image also become semi-transparent), but can I only make the layer to be semi-transparent?

Thanks
 
ping1234Asked:
Who is Participating?
 
klykkenCommented:
Actually, it is possible to change the opacity of the children objects, like it is seen on my transparency page mentioned above.

>>http://www.domedia.org/oveklykken/css-transparency.php

-klykken
0
 
Timbo87Commented:
In your CSS:

.semitransparent {filter: alpha (opacity=50)}

And for the <DIV>:

<div class=semitransparent>
...
</div>
0
 
Timbo87Commented:
Sorry, misread your question.

What about this:

CSS:
.semitransparent {filter: alpha (opacity=50)}
.plain {filter filter: alpha (opacity=100)}

Body:
<div class=semitransparent>
<!-- things that need to be full opacity use "plain" class -->
<span class=plain>
My Message
</span>
</div>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Timbo87Commented:
Typo in CSS :(

CSS:
.semitransparent {filter: alpha (opacity=50)}
.plain {filter: alpha (opacity=100)}
0
 
ping1234Author Commented:
Thanks for your reply first.

I have some tables in the inside the <span></span>..but they are semi-transparent too..
anything wrong?
0
 
Timbo87Commented:
Add this to the table.

<table class=plain>
...
</table>
0
 
ping1234Author Commented:
sorry..it does not work too.

<HTML><HEAD>
<TITLE>testing</TITLE>
<style type="text/css">
.semitransparent {filter: alpha (opacity=50)}
.plain {filter: alpha (opacity=100)}
</style>

<BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<div id="Layer1"  class="semitransparent" style="position:absolute; left:102px; top:230px; width:565px; height:124px; z-index:1; border: 1px none #000000">
 <table class="plain" width="565" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="1"></td>
      <td width="122"><img src="images/image.gif" width="122" weight="122"></td>
      <td width="1"></td>
    </tr>
</table>
0
 
Timbo87Commented:
I'm not quite sure why it's not working, but I don't do a lot with transparency. Here are some links that will hopefully solve your problem:

http://www.domedia.org/oveklykken/css-transparency.php
http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217
0
 
seanpowellCommented:
I'm sorry ping1234, I'm a little confused by the effect you're trying to achieve.
Basically, anything inside a semi-transparent div "must be" semi-transparent. There's no way to have internal elements not respond to the opacity change.
The only way to deal with this is by layering div's on top of one another, in the right stacking order.

Here's an example:

<html>
<head>
<title>testing</title>
<style type="text/css">
<!--
body      { margin:0px; padding:0px; background-color:#ffffff; }
div.semi  { background-image:url('images/image.gif'); position:absolute; left:20px; top:20px; width:150px; height:50px; z-index:1; filter:alpha (opacity=50); }
div.full  { position:relative; z-index:2; }
//-->
</style>
</head>
<body>
<div class="full">
<table width="170" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20" nowrap>&nbsp;</td>
    <td width="150" height="40" valign="bottom">This is full strength!</td>
  </tr>
</table>
</div>
<div class="semi"></div>
</body>
</html>
0
 
webwomanCommented:
It's MUCH easier to use a graphics program to get the effect you want, and use positioning to put it in the right place.

Nothing is really transparent, it just looks that way. Then you don't have any inheritence problems, and don't have to use any of the filters.
0
 
gam3r_3xtr3m3Commented:
>> It's MUCH easier to use a graphics program to get the effect you want...
echo webwoman

-- the filter:alpha(opacity=##) changes everything in the tag + the texts and objects contained. if you really dont like to use graphics to do a transparency effect. use a separate <div> for the content and position each absolutely with defining the z-index for each.
0
 
seanpowellCommented:
Recommend:
Split: klykken {http:#10477819} & seanpowell {http:#9817437}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.