Używam czegoś podobnego do poniższego kodu:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Oczekiwałem, że to sprawi, że tło będzie miało nieprzezroczystość 0,4, a tekst będzie miał 100% nieprzezroczystości. Zamiast tego oba mają nieprzezroczystość 0,4.
Dzieci dziedziczą nieprzezroczystość. Byłoby to dziwne i niewygodne, gdyby tak nie było.
Możesz użyć półprzezroczystego pliku PNG jako obrazu tła lub użyć koloru RGBa (a jak alfa) jako koloru tła.
Przykład, 50% wyblakłe czarne tło:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Zrobiłbym coś takiego
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
To powinno zadziałać. To jest zakładając, że jesteś zobowiązany do posiadania półprzezroczystego obrazu BTW, a nie koloru (dla którego powinieneś po prostu użyć rgba). Zakłada się również, że nie możesz'po prostu zmienić nieprzezroczystości obrazu wcześniej w Photoshopie.
Dzieje się tak, ponieważ wewnętrzny div ma 100% nieprzezroczystości div, w którym jest zagnieżdżony (który ma 40% nieprzezroczystości).
Aby to obejść, jest kilka rzeczy, które możesz zrobić.
Możesz utworzyć dwa oddzielne divy w ten sposób:
<div id="background"></div>
<div id="bContent"></div>
Ustaw żądane krycie CSS i inne właściwości dla tła i użyj właściwości z-index (z-index), aby stylizować i pozycjonować div bContent. W ten sposób można umieścić div nad tłem div bez konieczności zmieniania jego nieprzezroczystości.
Inną opcją jest RGBa. Pozwoli to na zagnieżdżenie divów i nadal będzie można uzyskać nieprzezroczystość specyficzną dla danego diva.
Ostatnią opcją jest po prostu zrobienie półprzezroczystego obrazu .png w wybranym kolorze w edytorze obrazów, ustawienie właściwości background-image na adres URL obrazu i wtedy nie będziesz musiał się martwić o mieszanie z CSS i utratę możliwości i organizacji zagnieżdżonej struktury div.