В большинстве браузеров, когда элемент html непрозрачен только частично, его дочерние элементы "наследуют" эту непрозрачность.(Это не совсем наследование - точнее, все изображение собрано, включая рекурсивный родительский элемент и его дочерние элементы, а затем к нему применяется непрозрачность.)
В IE8 (и я быпредположим также для более ранних версий IE), это не всегда то, что происходит с непрозрачностью.Если дочерние элементы имеют position: 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 для динамического построения изображения.
Моя первая попытка обойти эту проблему - применить непрозрачность как к родительскому, так и к дочернему элементам, либо установив фильтр на дочернем элементе в альфа (непрозрачность = 50);или просто установка фильтра: наследовать ;.Это не приводит к желаемому результату, потому что он делает полупрозрачный синий прямоугольник с полупрозрачным серым прямоугольником на вершине.Пустое пространство в середине становится полупрозрачным сине-серым, тогда как оно должно быть полупрозрачным серым.Точно так же это не работает, чтобы сделать элементы родными элементами.Любое решение должно скомпоновать два изображения, прежде чем применить какую-либо прозрачность к чему-либо.
В моем исследовании я нашел несколько предложений, которые применяют любое увеличение: 1;или плавать: нет;чтобы внутренний элемент мог решить проблему, но ни одна из них не сработала для меня.
Мой возможный обходной путь должен был дать положение дочернего элемента: static.Это своего рода уродливое решение, но я применил бы его к приведенному выше примеру, изменив стиль дочернего элемента, чтобы он выглядел следующим образом:
div.childElem
{
background-color:#808080;
position:static;
margin-left:10px;
margin-right:10px;
height:205px;
margin-top:10px;
}
Это своего рода уродливое решение, потому что это означает, чтоЯ должен знать высоту объекта.Кроме того, в реальном случае, когда я сочиняю несколько разных png-файлов, и я хотел бы, чтобы они были логическими братьями и сестрами, я должен поместить их все во вложенный parent-child-grandchild-etc.отношения.Это также не позволяет мне добавлять какие-либо текстовые элементы, кроме как в самом верху стека (самый внутренний элемент div), не мешая позиционированию.Тем не менее, он работает и выглядит одинаково во всех браузерах.
Есть ли способ избежать такого ужасного обходного пути и иметь прозрачность, корректно влияющую на дочерние элементы, не делая положение статичным?Спасибо!