Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 755
  • Last Modified:

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
 
0
ping1234
Asked:
ping1234
  • 5
  • 2
  • 2
  • +3
2 Solutions
 
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
 
Timbo87Commented:
Typo in CSS :(

CSS:
.semitransparent {filter: alpha (opacity=50)}
.plain {filter: alpha (opacity=100)}
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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
 
seanpowellCommented:
Recommend:
Split: klykken {http:#10477819} & seanpowell {http:#9817437}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now