Make Transparent Web Page in HTML 5

Sanjay Singh
5y
31.9k
0
3

Article

Introduction

When we use a colored background or image as our background on our web page and we insert another frame over our web page then the background of the web page is not visible where the frame is placed. So, to make it visible we use a transparent frame using the CSS3 tag "rgba". Here I provide you with the code, with and without the use of the CSS3 tag "rgba".

Simple webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body
{
background-image: url(comic-boy.png);
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="comic-boy.png" />
</body>
</html>

Output

When you use a transparent effect using "rgba":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body
{
background-image:url(comic-boy.png);
background-repeat:no-repeat;
width:200px;
height:200px;
}
.box
{
margin-top:5px;
width:200px;
height:300px;
background-color:rgba(55,55,255,0.5); //here i use rgba for color and opacity. for more transparency we can use 0.4 or 0.3,....,
box-shadow:2px 2px 2px 2px #999999;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="box">
</div>
<br />
<br />
<img src="comic-boy.png" />
</body>
</html>