Непрозрачность, НАСЛЕДОВАН в отделении
Действительно ли возможно удалить opacity наследование от родителя до он - ребенок div?
Пример
<style type="text/css">
.parent {
opacity:.5;
}
.parent div {
opacity:1; /* I want this to override the ".5", but instead it combines */
}
</style>
<div class="parent"><div></div></div>
3 ответа
Как говорит fmsf, это невозможно. Если вы ищете способ сделать цвет фона или цвета прозрачными, вы можете попробовать rgba. Это не поддерживается в IE6.
#my_element {
/* ie6 fallback - no opacity */
background-color:rgb(255, 255, 255);
/* rgba(red, green, blue, alpha); */
background-color:rgba(255,255,255,0.5);
}
Нет, не совсем в том смысле, в котором вы спрашиваете. Поскольку то, что происходит, на самом деле не , что значение наследуется в любом традиционном смысле, но дочерний элемент управления частично прозрачен как прямой эффект пребывания в частично прозрачном контейнере.
Вы можете обойти это во многих ситуациях.
Так что это не сработает:
<div id="parent" style="opacity: 0.5; background-color: red;">
<div id="child" style="opacity: 1"> Still just 50% visible </div>
</div>
Но вы можете сделать что-то вроде этого:
<div id="wrapper" style="position: relative;">
<div id="parent" style="position: absolute; top: 0; left: 0; opacity: 0.5; background-color: red; width: 100%;"> </div>
<div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>
Есть несколько предостережений, но это единственный хороший способ добиться того, чего вы хотите.
В этом примере я имею дело с одной строкой текста, а в «родительский» я включаю , который также будет занимать одну строку по высоте. Если ваш «ребенок» больше роста, «родитель» не будет расти, потому что на самом деле он вообще не родитель. Вам придется вручную установить высоту.
Вам также придется вручную указать ширину, поскольку вы имеете дело с абсолютно позиционированными элементами.
Я скажу, тем не менее, прежде чем люди начнут говорить, что абсолютное позиционирование - такой ужасный способ решения проблем дизайна, есть один случай, когда я думаю, что это совершенно законно: когда мы также имеем дело с position: relative , как в приведенном выше примере, и для абсолютного позиционирования элемента на основе , , а не всего окна.
Нет, нельзя.
Непрозрачность полностью унаследована от родительского div.
значение:
#father{
opacity: 0.5;
}
#child{
opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}
Изменить:
Если вы хотите обмануть его, но сохранив «рабочий процесс» вашего прозрачного отца. Вы можете поместить копию (по размеру и положению) отцовского div поверх отцовского div.
#father, #copy{
your css here
opacity: 0.5;
}
#copy{
opacity: 1;
background: transparent;
z-index: 1000; /* or one more than the father */
}
Теперь вместо того, чтобы помещать ваш непрозрачный HTML-код на отца, поместите его на копию.