0

当我在不透明度中遇到特异性冲突时，我正在设计一个导航栏按钮。我使用了 !important 覆盖，但这似乎不起作用。关于原因的任何线索？

HTML：

    <body>
    <div class="container">
        <span id="text">Lorem Ipsum</div>
    </div>
</body>

CSS：

    .container {
            background-color: #000;
            opacity:0;
            height: 30px; 
            width: 122px; 
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            position:absolute;
            top:40%;
            left:43%;
        }

         #text { 
            color: #fff;
            -moz-user-select: none;
            -webkit-user-select: none;
            font-family: Courier;
            position:absolute;
            top: 5px;
            left: 5px;
            width: 122px;
            opacity:1; !important;
        }

        body {
            background-color: #808080;
        }

在这之后，我得到的只是一个空白的灰色背景（由于背景颜色样式）。我知道不将跨度嵌套在 div 中更有意义，但出于动画目的，我需要这样做。

4

2 回答 2

2

必须是这样的：

opacity:1 !important;

;以前没有!important

如果.container有，opacity:0则此 div 中的所有元素都将不可见，即使您添加opacity:1 !important;到#text

于 2012-03-31T15:47:55.813 回答
0

第一的

声明!important写 thisopacity:1 !important;而不是 this opacity:1; !important;。

第二

您将不透明度定义#text 为父级，这就是为什么将其视为父级不透明度的原因。 因此，您可以使用RGBA()代替不透明度。

像这样写：

.container {
            background-color:rgba(0,0,0,0);
        }

IE过滤器

background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000);   /* IE6 & 7 */      
zoom: 1;
于 2012-03-31T15:54:48.837 回答