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

希望这有帮助

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

2 个答案: