javascript - 使用 jQuery Lights Out 效果保持 png 透明度

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 并将您的徽标图像作为背景。这似乎可以完成这项工作。

例子

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;
}

希望这可以帮助