CSS непрозрачность, как иметь непрозрачные элементы в прозрачном элементе контейнера - PullRequest
Новая
       45

CSS непрозрачность, как иметь непрозрачные элементы в прозрачном элементе контейнера

2 голосов
/ 18 ноября 2011

Я использую следующий код CSS: 

.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255);  */
}
.rounded_box h1{
  opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */ 
 }

И я хочу, чтобы h1 и другие непрозрачные элементы были внутри div, имеющего класс rounded_box.Но также делает прозрачными h1 и другие элементы, которые мне не нужны.

Так что может быть решением для этого?

Ответы [ 4 ]

5 голосов
/ 18 ноября 2011

opacity: 0.6 в .rounded_box будет применяться ко всем дочерним элементам (таким образом, .rounded_box h1. Таким образом, h1 opacity:1.0 на самом деле является только 100% родительского (0,6).

Что вы можете сделать, это использовать rgba, чтобы определить цвет фона .rounded_box, который не влияет на детей.

4 голосов
/ 18 ноября 2011

Если вы ищете только прозрачный фон для элемента с закругленными углами, используйте следующий код: 

.rounded_box{
...
background-color:rgba(128,193,255,0.6);
...
/*filter:alpha(opacity=60); Remove this */
}

.rounded_box h1{
...
 }
2 голосов
/ 15 октября 2012

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

0 голосов
/ 18 ноября 2011

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

Моя зона комфорта была быиметь содержащий div без непрозрачности, который содержит 2 вложенных div: один для хранения изображения bg, закругленные края, прозрачность и т. д .;и его брат, чтобы держать содержание.Я бы использовал JavaScript, чтобы принудительно сделать высоту непрозрачного div равной высоте содержимого div, тогда я бы просто поместил div содержимого поверх непрозрачного.

ИЛИ

IЯ бы просто использовал альфа-прозрачные PNG-изображения в качестве фонового изображения скругленного прямоугольника, предполагая, что мне не нужно было менять их цвет или что-то еще.Вы можете сделать это и по-прежнему использовать переменную ширину и высоту, если вы хотите вырезать верх / низ / стороны / углы отдельно.

...