Post
Ask Question

Make Transparent Web Page in HTML 5

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <style>  
  5.         body  
  6.         {  
  7.             background-image: url(comic-boy.png);  
  8.             background-repeat: no-repeat;  
  9.             width: 200px;  
  10.             height: 200px;  
  11.         }  
  12.     </style>  
  13.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  14.     <title>Untitled Document</title>  
  15. </head>  
  16. <body>  
  17.     <img src="comic-boy.png" />  
  18. </body>  
  19. </html> 
Output 
 
Simple webpage
 
When you use a transparent effect using "rgba":
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <style>  
  5. body  
  6. {  
  7.  background-image:url(comic-boy.png);  
  8.  background-repeat:no-repeat;  
  9.  width:200px;  
  10.  height:200px;  
  11. }  
  12. .box  
  13. {  
  14.  margin-top:5px;  
  15.  width:200px;  
  16.  height:300px;  
  17.  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,....,  
  18.  box-shadow:2px 2px 2px 2px #999999;  
  19. }  
  20. </style>  
  21.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  22.     <title>Untitled Document</title>  
  23. </head>  
  24. <body>  
  25.     <div class="box">  
  26.     </div>  
  27.     <br />  
  28.     <br />  
  29.     <img src="comic-boy.png" />  
  30. </body>  
  31. </html> 
Output
 
Output

Conclusion

 
In this article, we studied how to Make Transparent Web Page in HTML 5


Similar Articles