background-color: transparent;
Browser |
|
---|
The background-color property specifies the background color of an element.
The transparent iframe can be set by applying this property to the BODY element.
body {
background-color: transparent;
}
Apply this style to the BODY element of the page to load into the iframe.
Property | Value | Explanation |
---|---|---|
background-color | transparent | transparent background color |
In MSIE, the allowtransparency attribute must be specified for the IFRAME element at the same time.
<iframe src="example.html" allowtransparency="true"></iframe>
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
div {
background: #ffffff url(image/back.gif);
padding: 30px;
}
iframe {
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div>
<p><iframe src="example.html">Alternate content</iframe></p>
<p><iframe src="example.html" allowtransparency="true">Alternate content</iframe></p>
</div>
</body>
</html>
<html>
<head>
<title>TAG index</title>
<style type="text/css">
body {
background-color: transparent;
text-align: center;
color: #cc0000;
}
h1 { font-size: 100%; }
</style>
</head>
<body>
<h1>IFRAME example</h1>
<p>IFRAME</p>
<p>IFRAME</p>
...
</body>
</html>
- Output
-