! важная специфика не работает - PullRequest
Новая
       18

! важная специфика не работает

0 голосов
/ 31 марта 2012

Я проектировал кнопку панели навигации, когда у меня возник конфликт специфичности в непрозрачности. Я использовал! Важное переопределение, но это, похоже, не работает. Какие-нибудь подсказки относительно причины?

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, но мне нужно сделать это для анимации.

Ответы [ 2 ]

2 голосов
/ 31 марта 2012

должно быть таким: 

opacity:1 !important;

нет ; до !important

если .container имеет opacity:0, то все элементы внутри этого div не будут видны,даже если вы добавите opacity:1 !important; к #text

0 голосов
/ 31 марта 2012

Первый

Объявить !important написать это opacity:1 !important; вместо этого opacity:1; !important;.

Второй

Вы определяете Непрозрачность для #text parent , поэтому он принимает его родительскую непрозрачность. Таким образом, вместо opacity вы можете использовать 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;
...