1

私は次のHTMLを持っています:

            <div id="geo" class="myright">
                <img class="rounded-extra" src="images/mapa-bhcom.jpg" width="100%" height="100%"  >

                <br/>
                <br/>
                <br/>

                <h3>BHcom</h3>
                <p style="color: #858585; margin-top: -10px;">Ne dozvolite da Vam promaknu najbitnije informacije!</p>

                <ul class="connect">
                    <li class="email">
                        <a href="mailto:info@pagescroller.com">Pošaljite e-mail direktno</a>
                    </li>
                    <li class = "twitter">
                        <a href="http://twitter.com/remacez" target="_blank">Pratite nas na Twitteru</a>
                    </li>
                </ul>

            </div>

そして、html にインポートされた唯一の CSS ファイルにこの CSS があります。

#geo .connect .email{
    background: transparent url('../images/icon_mail.png') no-repeat 0 0;
}

#geo .connect .twitter{
    background: transparent url('../images/icon_twitter.png') no-repeat 0 0;
}

#geo .connect a{
    display: block;
    text-decoration: none;
    padding: 0 0 2px 29px;
    margin: 10px 0 0;
    font-weight: normal;
    font-size: 12px;
    color: #666;
}

#geo .connect a:hover{
    color: #333;
    text-decoration: underline;
}

ただし、Firefox も Chrome も、上記のメールに関連する私のスタイルを取得しません。Twitter の CSS セレクターは問題ありません。私は何が欠けていますか？

4

1 に答える 1

1

background: transparent背景プロパティからプロパティを削除します。Chromeはこれを奇妙に拾い上げ、100％透明にするので、画像は表示されますが表示されません。

background-image:url(../images/whatever.jpg) no-repeat;

これは、必要で子コンテンツに影響を与えたくない場合に、すべてのブラウザで背景の透明度を確保するために機能します。

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

透明度がコンテナ全体とその子に影響を与えたくない場合は、この回避策を確認してください。絶対的に配置された子と、比較的配置された親が必要です。
デモはhttp://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/で確認できます。

于 2012-11-06T01:35:07.207 に答える