Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Make Transparent Web Page in HTML 5
WhatsApp
Sanjay Singh
5y
32k
0
3
100
Article
transparent.zip
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
>
Output
Conclusion
In this article, we studied how to Make Transparent Web Page in HTML 5
CSS3
HTML Transparent Web Page
HTML5
HTML5 Web Page
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 986 people
Download Now!
Learn
View all
Membership not found