0

私のページでは、このソースから基本的な消灯効果を実装しました: http://www.emanueleferonato.com/stuff/lightsoff/

PNG画像を「ライトをオンにする」ボタンにしたいのですが、画像には、それが入っているdivからの永続的な白いボックスがあります.PNG画像だけが、消灯効果で黒いレイヤーの上に座ることができますか? ?

私のテストは次の URL にあります: http://www.voyagedesign.net/illuminatetests/logolightsout.html

ご回答ありがとうございます。

4

2 に答える 2

0

この問題は、次の CSS に起因します。

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

その background-color 属性を削除するか、オーバーライドします。

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

また：

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

トリックを行う必要があります。

于 2013-09-13T01:34:35.303 に答える
0

別の解決策があります。

私がしたことは、丸い 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;
}

お役に立てれば

于 2013-09-13T01:45:15.580 に答える