Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wydziedziczenie z przezroczystości
Forum PHP.pl > Forum > Przedszkole
sadistic_son
Cześć.

Mój główny pojemnik div ma przezroczystość na poziomie 90% (albo raczej ma być przezroczysty w 10%). Wszystko co jest w nim oczywiście też jest przezroczyste. I jest ok, oprócz tego, że pewne obrazki znajdujące się wewnątrz nie mają być przezroczyste. I nie mogę się pozbyć tej przezroczystości.
Uproszczony kod:

  1. <div class="main_container">
  2. <div class="next_container">
  3. <a href="sialala">bla bla</a>
  4. <div>
  5.  
  6.  
  7. <div class="next_container">
  8. <img class="obrazek_nieprzeroczysty" />
  9. <div>
  10.  
  11. </div>


  1. .main_container {
  2. opacity:90%;
  3. }
  4.  
  5. .obrazek_nieprzeroczysty{
  6. opacity:100%;
  7. }


Jak widać - chcę aby element o klasie obrazek_nieprzeroczysty nie był przezroczysty.
Rozumiem zasadę dziedziczenia - wiem, że 100% dla tego obrazka to tak na prawdę 90% przezroczystości względem html. Żeby był zupełnie nieprzezroczysty musiałbym mu ustawić opacity na ponad 100%.

Jakieś pomysły? Wolałbym nie ingerować w html w takim sensie aby obrazki musieć wywalić z elementów nadrzędnych, od których przezroczystość dziedziczy.
Dzięki.
Salvation
opacity działa w głąb elementów i nic tego nie zmieni... I przyjmuje wartości 0 - 100 procent.
Może zamiast opacity użyjesz rgba? Wtedy nie masz dziedziczonej przeźroczystości dla dzieci tego danego elementu.

Natomiast jeżeli potrzebujesz te opacity z jakiegoś powodu, to wystarczy wrzucić 2x obrazek - wtedy jak oba się nałożą na siebie, to problem o którym piszesz zniknie. Nie jest to jednak dobra praktyka.
sadistic_son
Cytat(Salvation @ 18.07.2022, 17:22:09 ) *
opacity działa w głąb elementów i nic tego nie zmieni...

No właśnie takiej odpowiedzi się bałem i spodziewałem sad.gif biggrin.gif


Cytat(Salvation @ 18.07.2022, 17:22:09 ) *
Może zamiast opacity użyjesz rgba? Wtedy nie masz dziedziczonej przeźroczystości dla dzieci tego danego elementu.

Nie bardzo rozumiem co masz tutaj na myśli - rozwiń pls.

Dzięki.

Salvation
Do czego konkretnie używasz tego opacity? Masz np. białe tło dla `.main_container` i chcesz by było trochę przeźroczyste? Jeżeli tak, to zamiast właściwości opacity, użyj funkcji rgba() dla właściwości background-color: https://developer.mozilla.org/en-US/docs/We...olor_value/rgba

Będziesz mieć coś takiego wtedy:
Kod
.main_container {
  background-color: rgba(255, 255, 255, 0.9);
}
trueblue
Możesz też użyć dwóch odrębnych elementów pozycjonowanych absolutnie wewnątrz kontenera pozycjonowanego relatywnie.
Jeden z opacity i elementami podrzędnymi, drugi bez opacity.
sadistic_son
Faktycznie, rgba załatwia sprawę. Dzięki kolego!

Zabawy z pozycjonowaniem nie próbowałem, ale brzmi sensownie co piszesz. Dzięki.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.