Text Opacity vs. Frame Opacity

liunx

Guest
Okay, here's my problem. I'm creating a site layout with an inline frame. There is an image behind the frame that I want to show through the frame. I figured out how to change the frames opacity so the image shows through, but how do I get the text, images, and scrollbar in that frame not to change opacity? Because I want to be able to read the text and see the scroll bar and stuff. I hope I'm clear enough in describing this problem, and please help if you can. Thank you! :)<!--content-->your being clear, but can we have a look at the code? Usually I put in a backgroundcolor="" so that I can see through elements.... but lets have a look at your url. <br />
<br />
<br />
I couldn't get much love out of the Iframe or Ilayer. How about a div?<!--content-->Well, here's the Iframe code that's on my page, if that's what you wanted (i hope it shows up instead of just making an inline frame...lol):<br />
<iframe src=http://www.htmlforums.com/archive/index.php/"inlineframe.htm" frameborder="0" style="filter : alpha(opacity=00)" borderwidth="0" width="312" height="296" style="border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0; border-left-style: none; border-right-style: none; border-bottom-style: none; border-top-style: none; border-top-color: 5C7A54; border-bottom-color: 5C7A54; border-left-color: 5C7A54; border-rigth-color: 5C7A54" border="0" bordercolor="5C7A54"></iframe><!--content-->well, I was actually looking for a full url example. In your code, you actually say: make the whole frame and its contents see through. What we are looking for isn't opacity, but a background=nothing type attribute. Unfortunately, I can't see that Iframes support the background property. <br />
<br />
try getting rid of the opacity, and adding background: transparent into the style definition anyway:<br />
<br />
<iframe src=http://www.htmlforums.com/archive/index.php/"inlineframe.htm" frameborder="0" style="background: transparent" borderwidth="0" width="312" height="296" style="border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0; border-left-style: none; border-right-style: none; border-bottom-style: none; border-top-style: none; border-top-color: 5C7A54; border-bottom-color: 5C7A54; border-left-color: 5C7A54; border-rigth-color: 5C7A54" border="0" bordercolor="5C7A54"></iframe><!--content-->Thanks for replying. I tried the background=transparent thing, but it didn't work. :( Does anyone have any other suggestions?<!--content-->it's been my experience - and a miserable one at that - that CSS filters, or at least the alpha one, get inherited all the way down as far as you can go, no matter what you do.<br />
<br />
e.g.,<br />
<br />
parent element = 50% opacity<br />
<br />
child element = 50% opacity<br />
<br />
even if you tell the child to be 200% opaque, it'll still be as translucent as the parent.<br />
<br />
that's Microsoft for ya. might wanna rethink how you're going to attempt to get the effect you're going for. i'm sure there's another angle you could attack that from and get the desired results.<br />
<br />
i'm not sure exactly what sort of functionality you're going for, but you could use DIV tags with the overflow set to on, combined with server-side includes (if your host offers that), and basically get a separate file to show up in a scrollable box with the background showing through, etc.... i've never tried it, but i'd guess it would work, anyway.<!--content-->All right, thanks for your help guys! I actually did a search online for "transparent iframes" and found this site, and it worked! Woo hoo, here's the site:<br />
<br />
<!-- m --><a class="postlink" href="http://www.webreference.com/js/tips/010209.html">http://www.webreference.com/js/tips/010209.html</a><!-- m --><!--content-->pretty cool trick, but it still doesn't work in NS :(<!--content-->cool tip. I also like using div's instead of iframes.... more cross browser compatico.<!--content-->I read this thread with interest as I was trying to do much the same thing. I finally just did a bit of a brute force and ignorance with a table cell, fixed background and text the same colour as the background. One thing I like with the way it came out is that the scroll bar is not part of the image. But I will be checking out the allowtransparency tip to see if it does a better job... keeping in mind browser incompatibilities.<!--content-->Well I think it worked out pretty well. If you guys wanna check out how my site turned out, here's the URL:<br />
<br />
<!-- m --><a class="postlink" href="http://lotrawards.vze.com">http://lotrawards.vze.com</a><!-- m --><!--content-->Hmmmm ... In Netscape 6, all I got was blank frames except the first page which only showed the html code... <br />
<br />
In IE 5.5 - A blank, white frame appears but no type shows until highlighted. <br />
<br />
So hmm - I'll check back and see how it working in a few days.<!--content-->That's weird, cause I've got AOL at home and it shows up fine there, and then I have IE at school and it shows up fine there too. Any suggestions?<!--content-->emeril,<br />
<br />
there are different versions of each browser. The most common versions you may encounter are: IE5.0, 5.5, and 6. Netscape 4.7, 4.9, 6, 7. <br />
<br />
Your code may look different in each of them... depending on how browser specific/ version specific it is. My suggestion is to view the page in each of the versions.<!--content-->
 
Back
Top