Непрозрачность унаследована в div - PullRequest
Новая
       14

Непрозрачность унаследована в div

8 голосов
/ 14 апреля 2010

Можно ли удалить наследство 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>

Ответы [ 5 ]

17 голосов
/ 14 апреля 2010

Как говорит 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);
}
3 голосов
/ 14 апреля 2010

Нет, не совсем в том смысле, о котором вы спрашиваете. Потому что то, что происходит, не на самом деле , что значение наследуется в любом традиционном смысле, но дочерний элемент управления частично прозрачен как прямой эффект нахождения внутри частично прозрачного контейнера.

Вы можете обойти это, хотя, во многих ситуациях.

Так что это не сработает: 

<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%;"> &nbsp; </div>
    <div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>

Есть несколько предостережений, но это единственный хороший способ достичь того, чего вы хотите.

В этом примере я имею дело с одной строкой текста, а в «родительском» я включаю &nbsp;, который также будет занимать одну строку по высоте. Если ваш «ребенок» имеет больший рост, «родитель» не будет расти, потому что он на самом деле совсем не родитель. Вам придется вручную установить высоту.

Вам также придется вручную указать ширину, поскольку вы имеете дело с абсолютно позиционированными элементами.

Я скажу, тем не менее, прежде чем люди начнут говорить, что абсолютное позиционирование является настолько ужасным способом решения проблем проектирования, что есть один случай, когда я думаю, что это совершенно законно: когда речь идет о position: relative, как Приведенный выше пример, и абсолютно позиционировать элемент на основе , что , а не на всем окне.

3 голосов
/ 14 апреля 2010

Нет, вы не можете

Непрозрачность полностью унаследована от деления отцов.

значение: 

#father{
 opacity: 0.5;
}

#child{
 opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}

Edit:

Если вы хотите обмануть его, но сохраните «рабочий процесс» вашего прозрачного отца. Вы можете поместить копию (по размеру и положению) папского дива поверх папы. 

#father, #copy{
your css here
opacity: 0.5;
}

#copy{
   opacity: 1;
   background: transparent;
   z-index: 1000; /* or one more than the father */
}

Теперь вместо того, чтобы помещать непрозрачный HTML в отца, поместите его в копию.

2 голосов
/ 07 мая 2012

Создайте прозрачный PNG и примените его как background родительского класса вместо использования opacity.

Демонстрацию см. Макет Twitter (в частности, фон / рамка вокруг основного содержимого).

0 голосов
/ 28 февраля 2014

Вы можете избежать наследования непрозрачности родитель-потомок, но оно будет хакерским: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Существует также плагин для выполнения работы, который называется: thatsNotYoChild.js .

В HTML5 вы также можете использовать RGBA , чтобы установить цвет фона, прозрачность (альфа) которого не наследуется.

Пример: 

/* Black with 75% transparency */
background-color: rgba(0, 0, 0, 0.25);
...