CODEWITHSUNDEEP
htmliframe
Eric Sauer
Eric Sauer

Reputation: 870

iFrame Transparency

How is it possible to lay an iFrame that has a black background and is slightly transparent on top of a html page so it kinda darkens the page.

I have this so far and its not working.

<iframe id="fade" src="fade.html" frameborder="No" style="FILTER: chroma(color=#000000)" allowtransparency="true">  
    <p>Your browser does not support iframes.</p>
</iframe>

fade.html

<html>
<body style="background:transparent">
</html>

Upvotes: 1

Views: 12276

Answers (1)

Ian Hunter
Ian Hunter

Reputation: 9774

If you just want to place a translucent box over some elements, try positioning a div with the right z-index and opacity properties:

HTML

​<p>I sit in the background and get covered up by a box.</p>
<div id="shade"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

​#shade {
    background-color: red;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: 5px;
    width: 50px;
    height: 50px;
    z-index: 5;
}
p {
  position: absolute;
  z-index: 1;  
}

See an example on jsfiddle.

Upvotes: 3

Related Questions