...

View Full Version : How to make this div transparant?



kippie
12-18-2003, 10:45 AM
In the HTML below I would like to make the red backgroundcolor transparant for example for 60%. Can someone help me how to do this?

This is the HTML:

<html>
<head><title>Untitled</title>
<style type="text/css">
<!--
div {
border-top: 1px solid orange;
border-bottom: 1px solid orange;
border-right: 1px solid orange;
border-left: 1px solid orange;
width: 50%;
height:40%;
background-color: #ff0000;
}
-->
</style>
</head>
<body>
<div>
How can I make this red background-color transparant for example for 60%?

</div>
</body>
</html>

Kippie

A1ien51
12-18-2003, 02:07 PM
you might want to try playing around with this:

moz-opacity:0.6;
filter:alpha(opacity=60);

plus this is a CSS question and not JS....

kippie
12-18-2003, 02:31 PM
Thanks for your help. Sorry I didn't know about the forum. But the problem with your code "filter:alpha(opacity=60);" is that the text on the background becomes also transparent and that's what I would like to avoid. So I would like to have the background transparent but not the text in it. Still any hope?

Kippie

z15645
12-18-2003, 03:03 PM
Just guessing here... <h1 filter:alpha(opacity=60);.... or something like that, might change the opacity just for the text of heading 1...

RoyW
12-18-2003, 11:16 PM
<div style="position:relative;width:50%;height:40%">
<div style="position:absolute;left:0;top:0;width:100%;height:100%;background-color:red;filter:alpha(opacity=60);-moz-opacity:0.6"></div>
<div style="position:absolute;left:0;top:0;width:100%;height:100%;padding:10;font-size:12px;">

This text is solid on a transparent background

</div>
</div>

Kor
12-19-2003, 10:25 AM
plus this is a CSS question and not JS....


Oh, but it might be a JS one :D if using styles on-the-fly.

By the way, knows anyone which is the on-the-fly attribute correspondent with CSS alpha(opacity=) and -moz-opacity:

??
document.getElementById(id).style.filter = 'alpha(opacity=60)';
document.getElementById(id).style.mozOpacity = '0.6';
??

Or?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum