Solved

dhtml layer with semi-transparent bg

Posted on 2003-11-24
15
750 Views
Last Modified: 2007-12-19
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
Comment
Question by:ping1234
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +3
15 Comments
 
LVL 15

Expert Comment

by:Timbo87
ID: 9815209
In your CSS:

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

And for the <DIV>:

<div class=semitransparent>
...
</div>
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9815219
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
 
LVL 15

Expert Comment

by:Timbo87
ID: 9815222
Typo in CSS :(

CSS:
.semitransparent {filter: alpha (opacity=50)}
.plain {filter: alpha (opacity=100)}
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:ping1234
ID: 9815410
Thanks for your reply first.

I have some tables in the inside the <span></span>..but they are semi-transparent too..
anything wrong?
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9815420
Add this to the table.

<table class=plain>
...
</table>
0
 

Author Comment

by:ping1234
ID: 9815441
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
 
LVL 15

Expert Comment

by:Timbo87
ID: 9815591
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9817437
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
 
LVL 19

Expert Comment

by:webwoman
ID: 9818480
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
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9824002
>> 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
 
LVL 8

Accepted Solution

by:
klykken earned 25 total points
ID: 10477819
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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 25 total points
ID: 10800610
Recommend:
Split: klykken {http:#10477819} & seanpowell {http:#9817437}
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question