Solved

dhtml layer with semi-transparent bg

Posted on 2003-11-24
15
747 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
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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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