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

Ensure two CSS components occupy the entirety of their container, positioned next to each other, with margin spaces between

I am looking to make two elements take up a precise percentage of the parent's width, while also including margins between them. Here is my current setup: <div class='wrap'> <div class='element'>HELLO</div>< ...

htmlcss

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss

CSS positional sequencing dilemma

I am having trouble with the layout in this particular scenario: . In the #boxOne div, I have a link followed by a div (#formloc) containing an input and another link. Even though the first link ("Appliquer une localisation") is placed before the #formlo ...

css

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

javascripthtmlcss

Bottom section of a multi-level website with horizontal dividers

I was struggling with aligning divs next to each other, but I managed to find a solution. The only issue is that the text now aligns to the right instead of going below as it should. Typically this wouldn't be an issue since all content is within the ...

htmlcss

Tips for displaying a Bootstrap 4 table on smaller screens

I have a Bootstrap 4 table filled with JSON data. The table renders perfectly on the UI, but users on smaller devices must scroll to view all the data. Despite there not being much data in the HTML table, users still need to scroll on small devices. I wa ...

csshtmlbootstrap-4media-queriesbootstrap-table

Adjusting the opacity of images in a Bootstrap 4 Jumbotron without affecting the text

Is there a way to apply an opacity of 0.5 to only the background image in my jumbotron, without affecting the text? Currently, when I set the opacity for the background, it also affects the text. How can this be resolved? Below is the custom CSS file: .j ...

cssbootstrap-4

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

Prevent text wrapping and clear floats in a clean and hack-free way

I am currently in the process of compiling a collection of blurbs accompanied by images that can be easily integrated into any section of our website. My goal is to ensure that these blurbs are versatile, free from rigid width specifications, and compatibl ...

csscss-float

Why isn't the input appearing on the succeeding line below?

<label for="email2">Enter Your Email Address</label> <input type="text" name="email2" id="email2" placeholder="example: [email protected]"> <label for="phone2">Phone Number</label> <input type="text" name="phone2" id= ...

htmlcss

What is the best way to remove table row data fetched from an API within a table?

Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...

javascriptjqueryhtmlcss

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

htmlcssangularng-bootstrap

Expanding CSS Grid to Occupy Remaining Area

I'm currently utilizing CSS grid to construct a basic 3 column layout. Here's a snippet of my code... .container { display:grid; grid-template-columns:1fr 1fr 1fr; } ...

htmlcsscss-grid

Adjust the font color in code function for Woocommerce

I am looking to customize the appearance of a specific part of this code: '% discount' This section displays the percentage amount followed by the word "Discount," and I would like to apply a unique color to this "% discount" * Modify the disp ...

phphtmlcsswordpresswoocommerce

The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet: <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. </span></span> The CSS for the info class is as fo ...

htmlcss

Distinct headings break up two-columned lists

Is there a way to ensure that the h2 header always stays with its list items, even if the number of list items varies? Currently, the header appears in one column and the lists appear in another column, causing them to be separated when the list count chan ...

htmlcsshtml-lists

Ways to create an oval background for my button

Can someone help me create a button with a unique shape similar to the Products button on stack overflow? Check out this image for reference I attempted using border radius, but it didn't give me the desired effect. I searched for other options but c ...

htmlcsshover

Manipulating the DOM in AngularJS Directives without relying on jQuery's help

Let's dive right in. Imagine this as my specific instruction: appDirectives.directive('myDirective', function () { return{ restrict: 'A', templateUrl: 'directives/template.html', link: functio ...

javascriptjqueryhtmlcssangularjs

Issue with allowing the second floating div to occupy the remaining horizontal space inside the container div

Describing the scenario, there is a container division with two floating divisions of different widths. You can view it live by following this link (look for "Hotel booking" section): I have added a border to the second division. My goal is to make this s ...

csshtmlcss-floatspace

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

javascriptjquerycss