В большинстве браузеров, когда элемент html только частично непрозрачен, его дочерние элементы "наследуют" эту непрозрачность. (Это не совсем наследование - вернее, все изображение собрано, в том числе родительский и его рекурсивно, а затем прозрачность применяется ко всему предмету.)
В IE8 (и я бы предположил также для более ранних версий IE), это не всегда происходит с непрозрачностью. Если дочерние элементы имеют позицию: static (по умолчанию, если позиция не указана), то она работает, как описано выше. Тем не менее, похоже, что если позиция установлена на что-либо другое (например, абсолютное или относительное), то дочерний элемент полностью непрозрачен.
Я хочу знать, как сделать непрозрачность правильно влиять как на родительский, так и на дочерние элементы, но все равно сохранить дочерний элемент с положением: absolute;
Вот пример проблемы. Следующий код должен сделать полупрозрачный серый ящик с полупрозрачной голубой областью, поверх вертикальной красной полосы. В Firefox, Chrome и т.д. Это то, что на самом деле видно. В IE8 синяя коробка является правильно прозрачной, но серая часть непрозрачна.
<!doctype html>
<html>
<head>
<style>
div.parentElem
{
background-color:#0000ff;
position: absolute;
left:75px;
top:75px;
width:300px;
height:225px;
opacity:0.5;
filter:alpha(opacity=50);
}
div.childElem
{
background-color:#808080;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
}
div.redBar
{
position: absolute;
left:150px;
top:50px;
height:350px;
width:25px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="redBar"></div>
<div class="parentElem">
<div class="childElem"></div>
</div>
</body>
</html>
Очевидно, что это всего лишь пример с игрушкой - у меня мог бы быть один div с синей рамкой и серый фон для достижения желаемого эффекта. В реальном сценарии я накладываю несколько разных div, каждый из которых имеет фоновое изображение png для динамического создания изображения.
Моей первой попыткой было применить непрозрачность как для родителя, так и для ребенка, либо установив фильтр на дочернем элементе alpha (opacity = 50); или просто настройка фильтра: inherit;. Это не дает желаемого результата, потому что он делает полупрозрачный синий прямоугольник с полупрозрачным серым прямоугольником сверху. Пустое пространство в середине заканчивается полупрозрачным сине-серым, тогда как оно должно быть полупрозрачным серым. Аналогичным образом, это не помогает сделать элементы братьями и сестрами. Любое решение должно составлять два изображения, прежде чем применять какую-либо прозрачность.
В моих исследованиях я нашел несколько предложений, касающихся применения масштабирования: 1; или float: none; для внутреннего элемента может решить проблему, но ни для меня не работало.
Моим возможным обходным решением было предоставить дочернюю позицию элемента: static. Это своего рода уродливое решение, но то, что я сделал бы, чтобы применить его к приведенному выше примеру, изменит стиль дочернего элемента:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
}
Это своего рода уродливое решение, потому что это означает, что я должен знать высоту объекта. Кроме того, в реальном случае, когда я составляю несколько разных png, и я хотел бы, чтобы они были логичными братьями и сестрами, я должен поместить их всех в вложенные родительские-дочерние внуки и т.д. отношения. Это также мешает мне добавлять какие-либо текстовые элементы, кроме самой верхней части стека (самый внутренний div), не нарушая позиционирования. Однако он работает, и он выглядит одинаково во всех браузерах.
Есть ли способ избежать такого ужасного обходного пути и иметь непрозрачность правильно влиять на дочерние элементы, не делая положение статическим? Спасибо!
