IE and Transparent Backgrounds

问题

I have the following css:

body {
     background-image: url(images/background.jpg);
     background-repeat: repeat-x;
     background-color: #99ccff;
}

Unfortunately, any div created on this page, now automatically has this colour. None of the following works if applied to any divs on he page (it still takes on the above colour.

bacgkround: none;
background: transparent;
bacgkround-color: none;
background-color: transparent;

Anybody know how to get around this (in IE)? i.e. How do I make the div transparent or NOT have a background color?

EDIT: I've uploaded a screenshot here: http://www.namhost.com/bgtrans.jpg Basically, the background is a gradient image that changes from DARK blue, to the light blue that is the background. In firefox, the area that says bradd pitt, is transparent and you dont see the blue outline. However, in IE, you see what you see in that screenshot.

Here's a screenshot of what can be seen in Firefox: http://www.namhost.com/bgtransfirefox.jpg

回答1:

not sure whats going wrong here (if anything is going wrong at all), transparent and none mean that the div shouldnt have its own colour and therefore you will see through the div to the background of the parent container....if none of the parents have a colour then you will see the background of the body/page

回答2:

Your assumption of background color seems to be wrong.

Making a background transparent means you will get the background of the underlying element. I think in this case its your body element. Since you have set a background color for the body tag all the element with background color transparent will show the body's background color.

Edit:

After reading your comment to the above answer I would like whether the image path is shown and the image width and height cover the whole body element.

回答3:

If you could use a 3rd party tool, JQuery provides this functionality:

http://mihaistancu.wordpress.com/2008/08/02/cross-browser-transparent-background-with-jquery-no-css-hacks-no-png-files/

回答4:

But I think this is what's supposed to happen.

If the div isn't assigned a background colour, the body background colour will be visible.

Especially if you say the div background is transparent.

回答5:

not sure what you expected. I get consistent behavior in firefox and IE for this code:

<html>
<style>
body
{
    background: green;
}
.a
{
    bacgkround-color: none;
}
</style>
<body>
<div class="a">hello</div>
<div>world</div>
</body>
</html>

if this is a more complex scenario, did you use debugBar to check the applied style, or at least FireBug on firefox to see what is actually applied?

来源：https://stackoverflow.com/questions/1356190/ie-and-transparent-backgrounds

标签

css

internet-explorer

styles