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 回答