...

View Full Version : Setting opaque/opacity, but not text/images



mh3|_p
01-04-2007, 03:01 AM
I want to set a div background color to opaque, but I don't want the images/text inside the div to also be opaque, is this possible?

Troy297
01-04-2007, 03:49 AM
Um.... you would have to use CSS to do that sort of stuff.... I'm not sure but possibly something like the below would do it... anyone else got ideas?


div {
opacity: 50%;
}
div.font {
opacity: 100%;
}
div.img {
opacity: 100%;
}

I've never actually tried opactiy & stuff using divs, just iframes... but you can try the above... it might work! Sorry.... thats all the help I can give.

mh3|_p
01-04-2007, 04:26 AM
Tried it, didn't work. Thanks for trying though. Appreciated.

Tyrial101
01-04-2007, 05:41 AM
Can you take a screenshot and show me what in it you want to be transparent/translucent?

ahallicks
01-04-2007, 10:15 AM
Stick:

#div {
opacity: .5;
filter: alpha(opacity=50);
}

as your outer div, then for any elements within try:

#div .element {
opacity: 1;
filter: alpha(opacity=100);
}

coothead
01-04-2007, 12:19 PM
Hi there mh3|_p,

I believe that you will have to use absolute positioning to achieve this.


<!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:#00f;
background-color:#00f;
}
#faded {
width:400px;
height:360px;
padding-top:40px;
background-color:#f00;
border:4px solid #000;
opacity:0.50;
filter:alpha(opacity=50);
text-align:center;
}
#unfaded {
position:absolute;
z-index:1;
left:64px;
top:189px;
width:300px;
height:50px;
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>

</head>
<body>

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

<div id="unfaded">this stays black</div>

</body>
</html>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum