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

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

15 голосов
/ 01 марта 2010

РЕДАКТИРОВАТЬ: изменение названия на самом деле правильный

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

Ответы [ 7 ]

22 голосов
/ 01 марта 2010

Обновленный ответ

Лучший способ сделать это сейчас - использовать цвета 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 .

(Обновлено. Думаю, что сверхлегкий подойдет вам.)

Обновление Вот очень простой тестовый пример. Создайте изображение (скажем, 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>
14 голосов
/ 21 июля 2012

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

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

2 голосов
/ 30 сентября 2015

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

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
1 голос
/ 02 августа 2016

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

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

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

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

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

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

1 голос
/ 25 сентября 2015

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

0 голосов
/ 23 октября 2015

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

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

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