Solved

dhtml layer with semi-transparent bg

Posted on 2003-11-24
15
741 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
  • 5
  • 2
  • 2
  • +3
15 Comments
 
LVL 15

Expert Comment

by:Timbo87
Comment Utility
In your CSS:

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

And for the <DIV>:

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

Expert Comment

by:Timbo87
Comment Utility
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
Comment Utility
Typo in CSS :(

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

Author Comment

by:ping1234
Comment Utility
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
Comment Utility
Add this to the table.

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

Author Comment

by:ping1234
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 15

Expert Comment

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now