StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIssue with transparent images on a transparent background
text
Body
copied!<p>I have a weird issue with a graphic with rounded corners.</p> <p>I have a HTML page with the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;") and within this body is a div with a PNG image with rounded corners, with transparency on the edges so that it transitions correctly with the background.</p> <p>This HTML page is contained within an iFrame on top of another HTML page, so I want the transparent image contained within the iFrame to show through and thus the rounded image to transition correctly with the background (which is an image) on the page that is calling the iFrame (hence the body within the iFrame has a transparent background).</p> <p>This actually works fine, except for the transparency on the rounded corners. For some reason there's a very fine but noticeable jagged black edging around the rounded corner, as if a black matte was put on it. </p> <p>I have also tried it with transparent GIFs, but got jagged white edgings instead.</p> <p>Has anyone ever tried to do something like this before, and got it to work? If so, I'd love to hear how.</p> <p><strong><em>EDIT</em></strong> Here's a link to the result: <a href="http://www.iandevlin.net/pics/searchtemp.png" rel="nofollow noreferrer">image</a> The image with the leaves is the background image (Flash) of the calling HTML. The search box is contained an an iFrame with a transparent background.</p> <p>This happens on IE7. Firefox seems ok, oddly enough.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload