Problem with see-through images against a see-through backdrop

I'm experiencing a strange issue with a graphic that has rounded corners.

On my HTML page, I have the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;"), and within this body is a div containing a PNG image with rounded corners and transparency around the edges for a smooth transition with the background.

This HTML page is inside an iFrame on top of another page, so I need the transparent image in the iFrame to show through and allow the rounded corners to blend smoothly with the background image on the calling page. However, despite everything working correctly, there's a fine but noticeable jagged black outline around the rounded corners, almost like it has a black border.

I even tried using transparent GIFs, but ended up with white jagged outlines instead.

Has anyone else encountered this issue before and found a solution? If so, please share your insight.

EDIT Check out the result here: image. The background image with leaves is from the calling HTML file, while the search box is within an iFrame with a transparent background.

This problem occurs specifically in IE7. Surprisingly, Firefox seems unaffected.

cssiframepngtransparencygif

Answer №1

When you have the Transparency set to 100 on the body tag, it actually means that it is not transparent at all. To achieve full transparency, you need to set it to 0. However, be aware that setting it to 0 will make all elements within the body tag also transparent.

It seems like a similar issue might be occurring with the search box, as it appears to be inheriting the opacity attribute that was previously set.

If you were to remove the opacity settings, what do you think would happen?

For more information on CSS transparency, you may want to visit this website:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS style takes precedence over inline JavaScript transitions occurring from a negative position

I am puzzled by a JavaScript fiddle I created which contains two small boxes inside a larger box. Upon clicking either of the buttons labeled "Run B" or "Run C", the corresponding box undergoes a CSS transition that is controlled by JavaScript. Below is t ...

javascriptcss

The element within the iframe is elusive to Selenium

Having trouble locating the element beneath an iframe even after switching to the frame. see screenshot here The HTML code can be found at: http://pastebin.com/AShYrdxQ ...

seleniumiframeselenium-webdriver

Switching button appearance when hovered over

Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS? ...

htmlcss

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

cssoverflow

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui

The CSS method for changing the content URL is experiencing difficulties in Firefox

Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...

css

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

htmlcsstwitter-bootstrap

Can CSS be used to consistently position content in a specific manner?

I previously inquired about a similar issue and received an excellent solution. Here is my jsbin http://jsbin.com/nuwagibayo/1/edit?html,css,output where I encountered the following scenario: The positioning of 12.50 seems slightly awkward in its current ...

css

Update the CSS dynamically using JavaScript or AngularJS

Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...

javascripthtmlcssangularjs

Chromium CSS blend mode problem

Can anyone help me create a Photoshop overlay effect on my website? My code works perfectly in Firefox, but it's not functioning correctly in Chrome. Here's the demo. This is my current code: HTML <img src="http://lorempixel.com/output/fash ...

htmlcssgoogle-chrome

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

javascriptcssreactjswebsass

What is the best way to recreate this grid-like design using CSS?

By utilizing clever techniques such as margins and outlines, I was able to design the following. If you'd like to take a look at the live website, it can be found at The CSS code that I used is as follows: body { margin: auto; max-width: 736px } s ...

htmlcssgridoutline

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

javascriptcssreactjsantd

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

javascriptcssangulardrag-and-droptranslate3d

Setting up a responsive footer using Bootstrap and responsive design involves following a few key steps

Seeking assistance with making the footer of my website responsive using a combination of Bootstrap and custom CSS. I am aiming for a result similar to the examples shown below, both optimized for Desktop and Mobile platforms. Your help in achieving this ...

htmlcsswebbootstrap-4

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

What strategies can I use to ensure consistent website layout across various zoom levels and browsers?

As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...

htmlcsslayout

Struggling to incorporate a basic drop-down into my design despite implementing transitions

Looking to optimize space on a webpage, I am interested in creating a hover effect for topics that reveals sub-topics with a smooth ease-out animation. Here is an example of the effect I am aiming for: https://jsfiddle.net/170z6pj1/ I have been strugglin ...

htmlcsstransition

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11