Menu
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.
973
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.
63
I'm not sure what you're trying to do here, but this should be what you are looking for:
iframe {
background-color: transparent;
}
This is, of course, assuming that you want the background to the iframe be transparent.
39
There's a way you can do this with jQuery if you have included the jQuery file -
<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->
Change .classname to that of your iframe or make one if there isn't one. (Take out the attribute from the iframe as well) Put that straight after the iframe closing tag and it adds in the required allowTransparency tag for browsers prior to IE9. As it is within the IE conditional statement, it is not read by the W3C validator. It also eliminates cross browser compatibility and content hiding issues with adding all the CSS that people have already mentioned, if you're using the latest jQuery version anyway. The allowTransparency attribute was created with a clearly defined purpose, so there's no point trying to recreate it with CSS when you can just silently insert it. Hope this helps someone!
(This method assumes you already haveiframe {background-color:transparent}which doesn't work on older IE versions)
4
First, there is no such thing as 'transparency="true"', so that won't work.
Second, are you trying to make the background transparent or the entire iframe transparent?
The CSS Opacity property makes everything inside whatever element you use it on transparent. Opacity scales from 0 to 1, where 0 is completely see-through, 0.5 is half transparent, and 1 is completely visible.
If you use this on a div or an iframe (or anything) the background and the text will all be equally faded.
On the other hand, in every modern browser you can set the backround to be partially transparent using RGBA color. You should do it like this:
iframe.transparent {
background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
background-color: rgba(255,255,255,0.5);
}
The RGBA color definition works just like the opacity attribute (0 = clear, 1 = solid), except it only makes the specific item you set it on transparent and does not affect the items inside that item (ie it does not affect the text inside your iframe). The first three numbers are the red, green, and blue values of your color on a scale from 0 to 255.
If you want a better cross-browser solution, though, I'd recommend just using a transparent .png file as a background image. You'll have to test this on IE, not sure if it will work for an iframe specifically, but you could set no background on the iframe and then set the transparent image as the background of the page you load inside the iframe (apply it to the body element for that page).
Hope this helps!
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
