Спс, тоже о таком подумывал
Ну вот еще один тупой вариант пришел в голову. Чтобы избежать наследования прозрачности, сделать два элемента: первый дочерний, у которого
visibility:hidden. На основе него рассчитывается высота родительского элемента, у которого и выставлена
opacity. Далее создается элемент, который по сути является копией предыдущего, но который не является дочерним по отношению к элементу прозрачного фона. Он абсолютно позиционируется вверх фона. Тем самым, он не будет наследовать прозрачность. По идеи у нас в одном месте будет два одинаковых контента, однако один из них не будет отображаться.
Ну вот пример:
<html>
<head><title>opacity</title>
<style>
body {
background:black;
color:white;
}
#bg {
background:white;
color:black;
opacity:0.5;
filter:Alpaha(Opacity='50');
width:300px;
margin:50px;
}
#content,#copy {
color:red;
font-weight:bold;
font-size:16pt;
}
#content {
visibility:hidden;
}
#copy {
position:absolute;
top:50px;
left:60px;
}
</style>
</head>
<body>
<div id='bg'>
<div id='content'>Content<br/>Content<br/>Content<br/></div>
</div>
<div id='copy'>Content<br/>Content<br/>Content<br/></div>
</body>
</html>
Метод туп тем, что контент дублируется, а соответсвенно растет и размер страницы
Здесь более оправданно примение JS для выяснения высоты фонового прозрачного элемента. Однако, этот метод сработает и при отключенном JS
в общем, хз
