I am looking for some alternate way to do:
<iframe transparency=true ...
When I do the W3C validation, I am getting the error:
Column 31: there is no attribute "allowtransparency"
If use this CSS,
.iframe-trans-fix{
opacity: 0;
filter:alpha(opacity=0);
}
for the above snippet I am getting a blank iframe.
See Question&Answers more detail:os
While it's true that the W3C's HTML spec does not define it, there is an allowTransparency attribute, and it is supported by all modern browsers (and Internet Explorer). As HTML5 has taught us, the cart is supposed to be before the horse.
Suppose you have this HTML on your main page, index.html:
<html>
<body>
<iframe src="source.html"
allowTransparency="true"
style="background-color:lightgreen;"
width="400" height="200">
</iframe>
</body>
</html>
And your source.html looks like this:
<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris
augue et dui. </p>
</body>
</html>
When you open the main page (index.html) in your browser, you will see the text from source.html in an iframe, but it will have a light green background.
(Tested with Safari, Firefox, and Chrome on Mac OS X and Internet Explorer 8 and Chrome on Windows XP)
Edit: The key is this: The source page cannot set its own background. If it does, it ignores the transparent background.
Update: Just tested this (March 2019) using Safari 12, Chrome 73, and Firefox 65 on macOS High Sierra, and it still works.
