Сохраняя PNG прозрачность, используя JQuery Lights Out эффект

Question

На моей странице я реализовал основные огни эффект от этого источника здесь: http://www.emanueleferonato.com/stuff/lightsoff/

Я хотел бы PNG изображение, которое будет кнопка, которая «переключает фары на «однако изображение имеет постоянный белый ящик из div, в котором он находится. Возможно ли, чтобы изображение PNG сидело над черным слоем в эффекте« свет »?

Мой тест на этот адрес: http://www.voyagedesign.net/illuminatetests/logolightsout.html

Спасибо за ваш ответ.

Answer 1

Проблема проистекает из этого CSS:

* { 
    margin: 0; 
    font-family: sans-serif; 
    background-color: #F6F6F4; 
} 

Либо удалите этот атрибут цвет фона или переопределить его:

#logo > img { 
    background-color: initial; 
} 

или:

#logo > img { 
    background-color: transparent; 
    background-color: rgba(0,0,0,0); 
} 

Если сделать трюк.

Answer 2

Есть еще одно решение для вас.

То, что я сделал, создано круглым div и разместил ваше изображение в качестве фона. Кажется, это делает работу.

EXAMPLE

HTML

<div id="logo"></div> 

CSS

#logo { 
    margin: 0 auto; 
    height:130px; 
    width:130px; 
    -moz-border-radius:130px; 
    -webkit-border-radius:130px; 
    padding:35px; 
    text-align:center; 
    color:white; 
    background-image: url(http://www.voyagedesign.net/illuminatetests/BMW_logo.png); 
    position:relative; 
    z-index:50; 
} 

Надеется, что это помогает