Как сохранить непрозрачность текста 100, когда его родительский контейнер имеет непрозрачность 50 - PullRequest
26 голосов
/ 23 июня 2011

У меня есть список div, у которого непрозрачность установлена ​​на 50, и внутри этого div я хочу отобразить некоторый текст с непрозрачностью 100,

Вот что я имею в виду:

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

CSS будет:

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

Я пробовал это, но это не работает.

пожалуйста, помогите

Привет

Ответы [ 5 ]

18 голосов
/ 23 июня 2011

Простое и совместимое решение - удалить все ваши opacity и использовать:

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}
  • Браузеры, поддерживающие rgba, будут использовать второе объявление background с rgba.
  • Браузеры , которые не будут игнорировать второе объявление background и использовать .png.

.png не будет работать в IE6, но это вряд ли будет проблемой . Если это так, может быть разрешено .


Еще один метод подробно описан здесь:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

12 голосов
/ 23 июня 2011

Есть два способа сделать это: один - просто установить цвет фона контейнера на прозрачный, с rgba(r,g,b,.5) - однако это CSS3 и поддерживается только в новых браузерах.Другой способ - поместить абсолютно позиционированный div внутри контейнера с непрозрачностью .5.

<div class="backgroundOpacity">
    My Epic Content
</div>
<br/>
<div class="backgroundDiv">
    <div id="background"> </div>
    My Other Epic Content
</div>
.backgroundOpacity {
 background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
  position:relative;  
}
#background {
 position:absolute;
  top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
   opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

5 голосов
/ 15 сентября 2013
background-color: rgba(0,0,0,0.5);
3 голосов
/ 14 мая 2013

Вы можете установить свой внешний div следующим образом

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

1 голос
/ 14 февраля 2018

Это можно сделать с помощью трюка, и это так просто, вот как:

Вы хотите вывести текст за пределы прозрачного div, и это путем создания другого div в качестве позиции :lative;

...