Question

我有以下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选择器就好了。我错过了什么？

Answer 1

从background属性中删除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/

查看演示

浏览器没有选择CSS类

1 个答案: