Log in

View Full Version : Using Opacity for Background without Text Inheriting it.


ETpro
09-08-2010, 08:57 PM
Example at http://yhst-40846486608415.stores.yahoo.net/test1.html

I want the opacity of the background of my top navigation bars set at 80% or some such number si the fence image peeks through it. But I want the text links in the Nav Bars to be fully opaque. I don't seem to be able to keep the <a> tags from inheriting the opacity setting of the containing <td> elements, even when I specifically state an opacity value for them. How can I make this work? Do I need to use a PNG graphic with an alpha channel opacity and deal with all the hacks necessary to get PNG alpha channels working in IE?

The styles involved are:

.hornav {
background-color: #393;
filter:alpha(opacity=80);
opacity:0.8;
-moz-opacity:0.8;
height: 24px;
border-left: 1px #fff solid;
border-bottom: 1px #fff solid;
text-align: center;
}
.headnav {
background-color: #393;
filter:alpha(opacity=80);
opacity:0.8;
-moz-opacity:0.8;
height: 24px;
border-right: 1px #fff solid;
border-top: 1px #fff solid;
text-align: center;
}
.headnav2 {
background-color: #393;
filter:alpha(opacity=80);
opacity:0.8;
-moz-opacity:0.8;
height: 24px;
border-top: 1px #fff solid;
text-align: center;
}

td.hornav a:link, td.headnav a:link, td.headnav2 a:link {
filter:alpha(opacity=100);
opacity:1;
-moz-opacity:1;
font-size: 12px;
font-weight: 900;
display: block;
color: #fff;
text-decoration: none;
background-color: transparent;
}
td.hornav a:visited, td.headnav a:visited, td.headnav2 a:visited {
color: #fff;
text-decoration: none;
background-color: transparent;
}
td.hornav a:hover, td.headnav a:hover, td.headnav2 a:hover {
color: #ff0;
text-decoration: underline;
background-color: #393;
}
azoomer
09-08-2010, 09:32 PM
It seems a little tricky, but maybe you could use rgba colors with a fallback for the background, to at least get the semi-transparency in modern browsers.
http://css-tricks.com/rgba-browser-support/
BuildMyWeb
09-09-2010, 08:05 PM
what about containing a div within a div. the outer div would be your semi-transparent bg and the inner div (same width/height as outer) will be opacity:100; but have no bg and only text.
ETpro
09-17-2010, 01:54 AM
what about containing a div within a div. the outer div would be your semi-transparent bg and the inner div (same width/height as outer) will be opacity:100; but have no bg and only text.I thought this would be the salvation, but finally got time to try it, and nothing doing. Even then the silly thing inherits all the way from the outer DIV. I'm just going to use a PNG background and the people who insist on using that piece of junk called IE, expecially before versin 7, will not see the beauty of the wonderful but subtle alpha transparency. Thet's what they get for using a dumnb browser. :-)
coothead
09-17-2010, 09:46 AM
Hi there ETpro,

Check out these examples, one of them may help...

1. very basic:-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

<style type="text/css">
body {
background-color:#00f;
}
#container {
position:relative;
width:440px;
margin:auto;
}
#faded {
width:400px;
height:360px;
padding:40px;
background-color:#f00;
border:4px solid #000;
opacity:0.30;
filter:alpha(opacity=30);
font-size:30px;
font-weight:bold;
text-align:center;
}
#unfaded {
position:absolute;
z-index:1;
left:84px;
top:189px;
width:300px;
padding:10px;
border:2px solid #000;
font-size:30px;
font-weight:bold;
text-align:center;
background-color:#fff;
}
</style>

</head>
<body>

<div id="container">

<div id="faded">this area is effected by opacity</div>

<div id="unfaded">this area is unaffected</div>

</div>

</body>
</html>

2. more involved:-


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body{
background-color:#000;
}
#box{
width:770px;
height:535px;
margin:30px auto;
border:5px double #f60;
background-image:url(http://www.coothead.co.uk/images/buddha.jpg);
background-repeat:no-repeat;
}
#container{
position:relative;
width:326px;
height:202px;
padding:1px;
border:3px inset #333;
margin:162px auto 0;
}
#background {
position:absolute;
width:324px;
height:170px;
padding-top:30px;
background-color:#f93;
opacity:0.4;
filter:alpha(opacity=50);
font-size:20px;
font-weight:bold;
text-align:center;
}
#foreground {
position:absolute;
width:324px;
border:1px solid #000;
line-height:200px;
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>

</head>
<body>

<div id="box">

<div id="container">
<div id="background">This is the Background</div>
<div id="foreground">This is the Foreground</div>
</div>

</div>

</body>
</html>

coothead
ETpro
09-19-2010, 01:05 AM
Those would work for most designs, but this one is a fluid design, expanding to fill available space. Doing fluid design with relative and absolute positioning can get to be a real PITA. I pretty much need to keep the text and background within a single containing element, not float one above the other with absolute positioning.
coothead
09-19-2010, 08:46 AM
Hi there ETpro ,

if it is fluidity that you're after, then check out the attachment.
The example within has no width or height values whatsoever. :D

coothead