Transparent PNG in a div tag, not using alpha?

问题

I have an odd issue while beginning to learn CSS. This is a test page. It has a large transparent PNG covering the background color of solid blue.

Typically the black image (which has transparent holes in it) completely blacks out my background color.

In this example page I made the image's div transparent just to see if the background was still working.

Any ideas why my alpha is getting completely ignored?

Thanks all.

回答1:

It's because on .backgrounddiv you have background-color set to #000. Instead use transparent to fix:

.backgrounddiv {
    position:absolute;
    background-color: transparent;
    background-image:url(POCTransparentBG.png);
...

回答2:

.backgrounddiv {
    position:absolute;
    background: transparent url('POCTransparentBG.png');
}

this is the proper css.

回答3:

I just looked at your page, and it seems like the div with the background image on it (backgrounddiv) is styled to also have a solid black background (#000). If you remove the:

background-color: #000;

From your source, it looks the way you'd like!

来源：https://stackoverflow.com/questions/6165669/transparent-png-in-a-div-tag-not-using-alpha