We can change the transparency of any element by using the opacity property. Now create a Web page named transparentbox.html to display the text on a transparent box.
<!doctype html>
<head>
<title> Transparent box </title>
<style type="text/css">
body{
background:url(nature1.jpg);
}
.trans{
width:500px;
height:400px;
margin:30px 50px;
background-color:#FFFFFF;
border:1px solid black;
opacity:0.5;
color:red;
font-weight:bold;
font-size:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>Working with Transparent box</h1>
<textarea class="trans" type="text">This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box.
</textarea>
</body>
</html>
Here We have added an image in the background of the body element. We have also added a textarea element and changed its transparency.
The output of the above Web page is :
<!doctype html>
<head>
<title> Transparent box </title>
<style type="text/css">
body{
background:url(nature1.jpg);
}
.trans{
width:500px;
height:400px;
margin:30px 50px;
background-color:#FFFFFF;
border:1px solid black;
opacity:0.5;
color:red;
font-weight:bold;
font-size:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>Working with Transparent box</h1>
<textarea class="trans" type="text">This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box. This is the example of the transparent box.
</textarea>
</body>
</html>
Here We have added an image in the background of the body element. We have also added a textarea element and changed its transparency.
The output of the above Web page is :
No comments:
Post a Comment