PDA

View Full Version : layer transparency


TheBaldOne
10-15-2006, 03:21 PM
This should be simple but my brain is not working properly.

I have an image as a background and have placed a layer over, which is a set colour.

What I am trying to do is make the colouered layer 50% transparent.

Any ideas greatly appriciated.

Thanks in advance.

domedia
10-16-2006, 02:32 AM
You can look at this, altough there's issues with the content of the layer also getting transparency.
http://www.domedia.org/oveklykken/css-transparency.php

chriskq
10-16-2006, 02:45 AM
if your using css it makes it pretty easy after u get ur head around the limits of opacity.
heres some code u can try out for size:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
body {
background: url(http://www.freedesktopwallpapers.net/beach/1beach2b.jpg) repeat;
}
#wrap {
background: #fff;
filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;
border: 1px solid #666;
width: 800px;
height: 300px;
margin: 0 auto;
text-align: center;
}
</style>
</head>

<body>
<div id="wrap">


The only problem is that the text inside inherits the opacity. You need to set the wrapper div to relative to get around this.</P>
</div>
</body>
</html>

TheBaldOne
10-16-2006, 12:32 PM
Thanks for the help.

Just one thing on the code attached in the last reply, can you just tell me what this part is all about.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Thanks again.

chriskq
10-16-2006, 01:05 PM
that is the doc type which is used to validate the page by the browser. I code in xhtml strict 1.0 (this is hte common professional one to use.... the other is transitional 1.0 too)

w3 are the people who give the web standards... check out all the doc types here
http://www.w3.org/QA/2002/04/valid-dtd-list.html

domedia
10-16-2006, 02:30 PM
And it's required to set the doctype.
It declares to which protocol your page is written and should be read, and if you use a validation service, it will check your code against the protocol.

TheBaldOne
10-17-2006, 10:50 PM
Thanks for your help on this.

I have been trying to write the secton as I need it.

The basic site is created with a table with split cells, one cell has an image as the background and this cell is the area I want to place a layer over the top with a semi-transparent background.

#main_box_layer {
position:absolute;
filter: alpha(opacity=60);
-moz-opacity: .60;
opacity: .60;
width:500;
height:415;
z-index:2;
margin: 0 auto;
top: 120;
background-color: #660000;
overflow: auto;
}

Now the layer works and is transparent but it has brought to light two other issues.

1. the auto scroll bars are not working and it just increases the size of the layer.
2. if I preview in IE the layer is positioned correctly 120px down from top, but in FF the layer appears 120px below top of cell.

Any ideas?

domedia
10-18-2006, 02:04 AM
Validate your CSS :-)

Width and height needs 'px'
as in width: 450px;

TheBaldOne
10-18-2006, 08:30 AM
Thanks you.

liquidmonkey
03-26-2008, 02:23 PM
thanks soooooooooo much for this post! great help and works perfectly!!