Nie chcę dziedziczyć nieprzezroczystości dziecka od rodzica w CSS.
Mam jednego diva, który jest rodzicem, i mam innego diva w pierwszym divie, którym jest dziecko.
Chcę ustawić właściwość krycia w div macierzystym, ale nie chcę, aby div potomny odziedziczył właściwość opacity.
Jak mogę to zrobić?
opacity
jest trochę jakdisplay: none
w tym sensie.Odpowiedzi:
Zamiast używać krycia, ustaw kolor tła za pomocą rgba, gdzie „a” oznacza poziom przezroczystości.
Więc zamiast:
posługiwać się
źródło
.png
:)Krycie nie jest w rzeczywistości dziedziczone w CSS. To transformacja grupy po renderowaniu. Innymi słowy, jeśli a
<div>
ma ustawiony krycie, renderujesz div i wszystkie jego dzieciaki w tymczasowy bufor, a następnie łączysz cały bufor w stronę z danym ustawieniem krycia.To, co dokładnie chcesz tutaj zrobić, zależy od dokładnego renderowania, którego szukasz, co nie wynika z pytania.
źródło
opacity: .7;
nadiv#container
sprawia, że każdy element dziecięcej - odul
/li
doimg
celup
- również mają taką samą krycie. Z pewnością jest dziedziczony.opacity: 0.7
wszystkich potomków, aby zobaczyć, jak wyglądałoby dziedzictwo. Tak jak powiedziałem, zamiast tego dziedziczenie powoduje, że nieprzezroczystość jest stosowana do całej grupy „elementu i wszystkich jego potomków” jako jednostki.Jak inni wspominali w tym i innych podobnych wątkach, najlepszym sposobem na uniknięcie tego problemu jest użycie RGBA / HSLA lub użycie przezroczystego PNG.
Ale jeśli chcesz absurdalnego rozwiązania, podobnego do tego, do którego link znajduje się w innej odpowiedzi w tym wątku (który jest również moją stroną internetową), oto zupełnie nowy skrypt, który napisałem, który automatycznie rozwiązuje ten problem, o nazwie thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Zasadniczo używa JavaScript, aby usunąć wszystkie elementy potomne z rodzica div, a następnie zmienić położenie elementów potomnych z powrotem tam, gdzie powinny być, bez faktycznego bycia dziećmi tego elementu.
Dla mnie to powinno być ostatecznością, ale pomyślałem, że fajnie byłoby napisać coś, co to zrobiło, jeśli ktoś chciałby to zrobić.
źródło
Trochę sztuczki, jeśli twój rodzic jest przezroczysty i chciałbyś, aby twoje dziecko było takie samo, ale zdefiniowane wyłącznie (np. W celu zastąpienia stylów użytkownika wybranego menu rozwijanego):
źródło
Krycie elementu podrzędnego jest dziedziczone z elementu nadrzędnego.
Ale możemy użyć właściwości position css, aby osiągnąć nasze osiągnięcie.
Div kontenera tekstowego można umieścić poza div div nadrzędnym, ale z absolutnym pozycjonowaniem wyświetlającym pożądany efekt.
Idealne wymagania ------------------ >>>>>>>>>>>>
HTML
CSS
Wynik:--
Tekst nie jest widoczny, ponieważ dziedziczy nieprzezroczystość od rodzica div.
Rozwiązanie ------------------- >>>>>>
HTML
CSS
Wynik :
tekst jest widoczny w tym samym kolorze co tło, ponieważ div nie jest w przezroczystej div
źródło
Pytanie nie zdefiniowało, czy tło jest kolorem, czy obrazem, ale ponieważ @Blowski już odpowiedział na kolorowe tło, poniżej można zhakować obrazy:
W ten sposób możesz manipulować kolorem krycia, a nawet dodawać ładne efekty gradientu.
źródło
Wygląda na to, że
display: block
elementy nie dziedziczą zmętnienia podisplay: inline
rodzicach.Przykład Codepen
Może dlatego, że jest to nieprawidłowy znacznik, a przeglądarka potajemnie je oddziela? Ponieważ źródło tego nie pokazuje. Czy coś brakuje?
źródło
Odpowiedzi powyżej wydają mi się skomplikowane, więc napisałem to:
kb-mask-overlay
to twój (nieprzezroczysty) rodzic,pop-up
to twój (brak nieprzezroczystości) dzieci. Wszystko poniżej to reszta witryny.źródło
Nie ma jednego uniwersalnego podejścia, ale szczególnie pomocne było ustawienie krycia dla bezpośrednich dzieci div, z wyjątkiem tego, które chcesz zachować w pełni widoczne. W kodzie:
i css:
W przypadku, gdy masz kolory / obrazy tła na elemencie macierzystym, naprawiasz krycie kolorów za pomocą rgba i obrazu tła, stosując filtry alfa
źródło
Jeśli musisz użyć obrazu jako przezroczystego tła, możesz być w stanie go obejść za pomocą pseudoelementu:
HTML
css
źródło
Moja odpowiedź nie dotyczy statycznego układu rodzic-dziecko, ale animacji.
Robiłem dzisiaj wersję demonstracyjną svg i potrzebowałem svg, aby być wewnątrz div (ponieważ svg jest tworzony z szerokością i wysokością div rodzica, aby animować ścieżkę dookoła), a ten div rodzicielski musiał być niewidoczny podczas animacji ścieżki svg (a następnie ten div miał to być
animate opacity from 0 to 1
, najważniejsza część). A ponieważ div div zopacity: 0
ukrywał mój svg, natknąłem się na ten hack zvisibility
opcją (dziecko zvisibility: visible
można zobaczyć wewnątrz rodzica zvisibility: hidden
):A następnie, w js, usuwasz
.invisible
klasę z funkcją timeout, dodajesz.opacity-zero
klasę, uruchamiasz układ z czymś podobnymwhatever.style.top;
i usuwasz.opacity-zero
klasę.Lepiej sprawdzić to demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
źródło
Na komputerze Mac możesz użyć edytora podglądu, aby zastosować krycie do białego prostokąta nałożonego na obraz .png, zanim umieścisz go w pliku .css.
1)
Logo obrazu
2) Utwórz prostokąt wokół obrazu
Prostokąt wokół logo
3) Zmień kolor tła na biały
prostokąt zmienił kolor na biały
4) Dostosuj prostokąt krycie
nieprzezroczystego obrazu
źródło
Przypisz kruchość 1.0 do dziecka rekurencyjnie za pomocą:
Przykład:
źródło
Dla innych osób, które starają się, aby stół (lub coś takiego) wyglądał na skoncentrowany na jednym rzędzie za pomocą krycia. Jak powiedział @Blowski, użyj koloru, a nie krycia. Sprawdź to skrzypce: http://jsfiddle.net/2en6o43d/
źródło