Прозрачный PNG в теге div, не использующий альфа?

Question

У меня странная проблема, когда я начинаю изучать CSS. Это тестовая страница. Он имеет большой прозрачный PNG, покрывающий цвет сплошного синего цвета.

Обычно черное изображение (в котором есть прозрачные отверстия) полностью затемняет мой фоновый цвет.

На этой странице примера я сделал div изображения прозрачным, чтобы посмотреть, работает ли фон.

Любые идеи, почему моя альфа полностью игнорируется?

Спасибо всем.

Answer 1

Это потому что на .backgrounddiv у тебя есть background-color установлен в #000, Вместо этого используйте transparent чинить:

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

Answer 2

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

это правильный CSS.

Answer 3

Я только что посмотрел на вашу страницу, и кажется, что div с фоновым изображением (backgrounddiv) также имеет сплошной черный фон (#000). Если вы удалите:

background-color: #000;

Из вашего источника это выглядит так, как вам бы хотелось!