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...

Code:


<!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.

Thread: Opacity / Transparency

Thread Tools

Search Thread

Opacity / Transparency

Bookmarks

Bookmarks

Posting Permissions