Создать непрозрачный 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, поэтому объяснение того, почему решение работает, было бы очень признательно.

15
css html opacity

7 ответов

Обновил Ответ

лучший способ сделать это сейчас-использовать цвета rGBA. Это не будет работать для старых браузеров, но вы можете позволить дизайну изящно деградировать, просто подавая им сплошной цвет. Пример:

в CSS

.parent {
    background: gray; /* older browsers */
    background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
    background: blue;
}

Оригинальный Ответ

это is раздражает, но CSS этого не позволяет. Установка непрозрачности для одного элемента означает, что ни один дочерний элемент не может иметь большей непрозрачности. (100% от 25% непрозрачность? Право.)

Итак, одно из решений-использовать крошечный прозрачный PNG в качестве повторяющегося фонового изображения, чтобы обойти это. Единственная проблема - IE6, и есть отличный обходной путь под названием 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>
17

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

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

14

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

1

Как насчет использования видимости?

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
1

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

поэтому вместо использования 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

1

попробуй такое

<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>
0

способ, которым я смог поместить прозрачный 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

смысл?

0