Создать непрозрачный div поверх прозрачного родительского элемента

EDIT: Изменено название, на самом деле правильно

Я пытаюсь моделировать модальное всплывающее окно во всех HTML и CSS, и мне немного не повезло с одним элементом того, что я делаю. Я хочу, чтобы самый внутренний div, тот, у кого есть контент, не был непрозрачным, как граница, но независимо от того, что я пытаюсь использовать с 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>

Я добираюсь до конца на этом. Я никоим образом не являюсь 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, а отличное обходное решение, называемое суперпространством.

(Обновлено. Think 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>

Ответ 2

Вы также можете сделать это, не используя прозрачное изображение. Создайте два отдельных div и используйте z-index для управления тем, который находится сверху

Пример кода на jsfiddle

Ответ 3

PNG обеспечит лучшую совместимость (вы должны использовать оператор filter: для IE6), но лучший метод CSS3 - это просто использовать цвета RGBA (например, фон: rgba (0,0,0,0,5), вы получите черный цвет на уровне 50% альфа), , который избавится от наследуемой непрозрачности.

Ответ 4

Настройка цвета родительского div с непрозрачностью с помощью rgba-color будет иметь больше смысла здесь, потому что в этом случае дочерний элемент не наследует непрозрачность и не будет прозрачным!

поэтому вместо использования background-color: gray или #something используйте что-то вроде этого:

.modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

Подобно этому родительский элемент имеет непрозрачность 0,7, но не наследует его ни к одному div, ни к изображению, ни к чему-либо другому внутри этого div!

В сети много генераторов rgba, попробуйте их.

http://www.css3-generator.de/rgba.html

Ответ 5

Попробуйте это

<div  class="" id="" style=" background: none repeat-x scroll 4px 3px lightgoldenrodyellow; left: 450px;  width:470px; text-align:center; height: 45px; position: fixed; 
  opacity:0.90;
    filter:alpha(opacity=40);
    z-index: 1000; ">
</div>

Ответ 6

Как использовать видимость?

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}

Ответ 7

То, что я смог установить прозрачный div за непрозрачным div, состоял в том, чтобы использовать что-то вроде:

`div.transparent-behind { opacity: 0.4; 
                      z-index: -1; }

 div.opaque-ontop { position: absolute; 
                top: (wherever you need it to fit)px;
                left: (some # of)px}'

где div не вложен внутри друг друга, но один за другим в html

иметь смысл?