[CSS] Wydziedziczenie z przezroczystości Opcje

[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:

[HTML] pobierz, plaintext 
<div class="main_container">
 <div class="next_container">
  <a href="sialala">bla bla</a>
 <div>
 
 
 <div class="next_container">
  <img class="obrazek_nieprzeroczysty" />
 <div>
 
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.main_container {
 opacity:90%;
}
 
.obrazek_nieprzeroczysty{
 opacity:100%;
}
[CSS] pobierz, plaintext 

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.

Ten post edytował Salvation 18.07.2022, 16:22:53

[sadistic_son]

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 (IMG:style_emoticons/default/sad.gif) (IMG:style_emoticons/default/biggrin.gif)

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.

Ten post edytował sadistic_son 19.07.2022, 18:17:17