...

View Full Version : Opacity in CSS



bubaphex
09-12-2007, 12:22 PM
Hey all, I have a bit of a dilemma

Iím having trouble with using an image in a table cell which has a background which is has an opacity of 30%, hope Iíve explain that rite.
To go into more detail

#left {
height:357px;
width:312px;
padding:10px;
opacity: .3;
filter: alpha(opacity=30);
text-align:left;
vertical-align:text-top;
}

That is what is currently assigned to a table cell which Iím place an image in. Now the problem is the image is inheriting the properties of the opacity which I donít want it to.

My question is, is there a way of getting around it.

Iíve tried manually using images but I canít get them to save with #FFFFFF with the opacity of %30 in Photoshop, it seems to save it with %100 opacity
Any help would be appreciated

VIPStephan
09-12-2007, 01:15 PM
No, CSS opacity is always inherited by children. Apart from the fact that an image most likely has nothing to do in a table (as tables are not there to create a page layout!) you could apply a semi-transparent image (PNG) as background then you donít need CSS opacity.

ahallicks
09-12-2007, 01:26 PM
You will, however, need to use some for of hack for IE6, which doesn't support alpha transparency in PNG's without the filter being used in CSS.

coothead
09-12-2007, 01:41 PM
Hi there bubaphex,

absolute positioning of the image will prevent it from inheriting the opacity.
Here is a basic example...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#f00;
}
#container {
position:relative;
width:332px;
margin:30px auto;
}
#container td {
height:357px;
width:312px;
padding:10px;
background-color:#fff;
filter:alpha(opacity=30);
opacity:0.3;
}
#container img {
position:absolute;
top:134px;
left:112px;
width:100px;
height:100px;
border:4px solid #f00;
}
</style>

</head>
<body>

<div id="container">

<table><tr>
<td></td>
</tr></table>

<img src="http://mysite.orange.co.uk/azygous/images/anim3.gif" alt=""/>

</div>


</body>
</html>

coothead

p.s. you should not be using table for layout purposes. ;)

bubaphex
09-13-2007, 10:32 PM
Cheers for the help guys, no need to worry, not using the table for layout purposes, just a table to display IM User name, and gif's displaying there IM status



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum