Div kiedy parent ma przezroczyste tło

0

Cześć,
zrobiłem swój własny pop up jednak mam jeden problem. Ustawiłem warstwie przykrywającej całą stronę przezroczystość i teraz div w którym wyświetlam zawartość pop upa również jest przezroczysty. Czy możecie mi podpowiedzieć co zmienić żeby nie był przezroczysty?

<div id="parent" style="width:100%;height:100%;top:0;left:0;display:none;position:fixed;overflow:auto;opacity:.85;background-color:#313131;z-index:99999">
<div id="child" style="opacity:1;position:absolute;top:30%;left:50%;margin-left:-200px;">
Zawartość
</div>
</div>

Z gory dzieki!

0

najlepiej sobie poczytaj o priorytetach w css
http://webkod.pl/kurs-css/lekcje/dzial-1/stopien-waznosci-selektorow-css
id i style="" używaj w ostateczności, a zwykle class
oraz używaj chrome dev tools, aby stwierdzić co się dzieje z elementami strony

0

Przezroczysty, czy się nie wyświetla? display: none; można przegapić.

0

To, że jest display none to wiem bo pokazuje te elementy za pomocą JS :)

O priorytetach też czytałem z tym, że robię mały dodatek do CMSa i ciężko mi ogarnąć te wszystkie struktury stąd używam style.

1

Może chodzi o ustawienie margin-left: -200px?

https://jsfiddle.net/e28hr5uy/5/

Pewnie są różne sposoby formatowania pop-upów – zobacz ten:
https://www.w3schools.com/howto/howto_js_popup.asp

0

Efekt mam taki jak na screenie. Chciałbym żeby ten biały div nie był przezroczysty... Pokombinuje jeszcze, moze uda mi się coś zrobić.

screenshot-20180317175014.png

1

Ok, rozwiązanie jest banalne.

Wystarczy zamienić:

background-color:#313131;

na

background-color:rgba(49, 49, 49, 0.85);

Dodatkowo znalazłem komentarz:

Now parent can have its own opacity value that will not be inherited by its children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

Więc ze wsparciem nie ma problemu.

Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1