Создайте непрозрачное отделение сверх прозрачного родительского элемента
Править: Измененный заголовок, чтобы на самом деле быть корректным
Я пытаюсь моделировать модальное всплывающее окно во всем HTML и CSS и имею немного неудачи с одним единственным элементом того, что я делаю. Я хочу самое внутреннее отделение, тот с содержанием, чтобы не быть непрозрачным как граница, но независимо от того, что я пробую CSS, я не могу заставить это работать. Вот код:
CSS
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
HTML
<table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
<div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden;
top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
border: solid 1px navy; background-color: White;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;"
><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
</div>
</div></td></tr></table>
Я достигаю конца своего witt на этом. Я не HTML или гуру CSS каким-либо образом, таким образом, объяснение того, почему работы решения значительно ценились бы.
1 ответ
Обновленный ответ
Лучший способ сделать это сейчас - использовать цвета rGBA. Это не будет работать для старых браузеров, но вы можете позволить дизайну изящно деградировать, просто подавая им сплошной цвет. Пример:
CSS
.parent {
background: gray; /* older browsers */
background: rgba(128,128,128,0.7); /* newer browsers */
}
.child {
background: blue;
}
Оригинальный ответ
Это раздражает, но CSS этого не позволяет. Установка непрозрачности для одного элемента означает, что ни один дочерний элемент не может иметь большую непрозрачность. (100% от 25% непрозрачности? Правильно.)
Поэтому одно из решений - использовать крошечный прозрачный PNG в качестве повторяющегося фонового изображения, чтобы обойти это. Единственной проблемой здесь является IE6, и есть отличное обходное решение под названием supersleight.
(Обновлено. Думаю, supersleight сработает для вас.)
Обновление. Вот очень простой тестовый пример. Создайте изображение (скажем, PNG с 50% черной заливкой), а затем создайте этот файл - сохраните их в одной папке. Если вы не видите тонкую рамку с прозрачным фоном за "штукой", значит, вы либо неправильно сохранили файл, либо сохранили изображение в другом месте.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>