Log in

View Full Version : Opacity / Transparency


emanuelle
05-31-2010, 06:12 AM
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#fff;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

i want by text to be white. but now i cant see it. is there a way?
it lays on a semi transparent white bg
djr33
05-31-2010, 08:18 AM
You are putting white text on white. Then the div is faded-- but the text fades with it (I think).
What do you want? 60% opaque white background with 100% opaque text, both white?

You will need to use a semi-transparent background (and not transparent div), and the text will remain opaque.


Alternatively you could try to position one div on top of another: semi-transparent div below as the background and text on the div above, fully opaque.
coothead
05-31-2010, 09:01 AM
Hi there emanuelle,

Try it like this...


<!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">
#background {
position:relative;
width:500px;
height:250px;
background:#c60 url(klematis.jpg) repeat; /*the #c60 is for testing and may be removed*/
border:2px solid #000;
}
#transbox {
position:absolute;
width:400px;
height:180px;
margin:33px 48px; /* these values give true centering */
background-color:#fff;
border:1px solid #000;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
#text {
position:absolute;
width:320px;
height:120px;
margin:65px 90px; /* these values give true centering */
font-size:13px;
font-weight:bold;
color:#fff;
}
</style>

</head>
<body>

<div id="background">

<div id="transbox"></div>

<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin massa. Nam vehicula. Morbi velit nisi, mollis id,
ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit.Maecenas
condimentum pulvinar purus.Pellentesque ac ipsum.
</div>

</div>

</body>
</html>

coothead
emanuelle
05-31-2010, 09:32 AM
fantastic

thank you!
coothead
05-31-2010, 09:35 AM
No problem, you're very welcome. ;)