How to create a transparent iframe ?
The <iframe> tag is an inline frame. It is used to embed another HTML page within the current HTML page.
Syntax:
< iframe src = "URL" ></ iframe > |
A transparent iframe can be made by setting its background to transparent.
body { background-color : transparent; }
And, the allowtransparency attribute of “iframe” is to be set as “true”.
< iframe src = "URL" allowtransparency = "true" ></ iframe > |
Example:
- HTML code:
<!DOCTYPE html>
<
html
>
<
body
>
<
div
style="background: green;
padding: 30px;">
<
iframe
src
=
"iframe.html"
allowtransparency
=
"true"
>
Alternate content
</
iframe
>
</
div
>
</
body
>
</
html
>
- iframe.html
<!DOCTYPE html>
<
html
>
<
body
style=
"background-color: transparent;
text-align: center;
color: #ffffff;">
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
<
p
>w3wiki</
p
>
</
body
>
</
html
>
Output: