Last updated on May 11th, 2022 at 08:56 am
This script will create a transparent box with opacity (I have given here 0.6) and you will be able to see text inside the box. We can change the opacity using CSS3 standard for Mozilla and filter:alpha(opacity=X) tag for Internet Explorer.
There are basically 2 divs one of width 600px and other small one with 500px. Inside the small div we are placing our text which has some alpha property. It can be changed at any time by modifying the CSS part of the script below. Check out demo for more details.
The source code looks like this:
<html>
<head>
<title>Transparent Box Using CSS</title>
<style type="text/css">
div.background
{
width: 600px;
height: 250px;
background-color:#777;
background:#000 url(anyname.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 500px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.3;
/* for Mozilla */
-moz-opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</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>
NOTE: This script was first posted on Dec 30, 2008. Bugs fixed and Demo added on May 26, 2016, Updated again on May 11, 2022
admin