Es izmantoju kaut ko līdzīgu šādam kodam:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Es sagaidīju, ka fona necaurredzamība būs 0,4, bet teksta necaurredzamība būs 100%. Tā vietā tiem abiem ir 0,4 necaurspīdība.
Bērni pārmanto necaurredzamību. Būtu dīvaini un neērti, ja tā nebūtu.
Fona attēlam varat izmantot caurspīdīgu PNG failu vai fona krāsai izmantot RGBa (a kā alfa) krāsu.
Piemērs, 50% izbalējis melns fons:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Es darītu kaut ko līdzīgu.
<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;
}
Tam vajadzētu darboties. Tas ir pieņemot, ka jums ir nepieciešams daļēji caurspīdīgs attēls, bet ne krāsa (kurai jums vienkārši jāizmanto rgba). Tāpat tiek pieņemts, ka jūs nevarat vienkārši mainīt attēla necaurspīdīgumu iepriekš Photoshop programmā.
Tas ir tāpēc, ka iekšējam divsadaļai ir 100 % necaurspīdība no tās divsadaļas, kurā tā ir ievietota (tai ir 40 % necaurspīdība).
Lai to apietu, varat veikt dažas darbības.
Varētu izveidot divus atsevišķus divs, piemēram, šādi:
<div id="background"></div>
<div id="bContent"></div>
Iestatiet vēlamo CSS necaurspīdīgumu un citas fona īpašības un izmantojiet z-index īpašību (z-index), lai stilizētu un pozicionētu bContent div. Tādējādi jūs varat novietot šo div virs fona diva, nemainot tā necaurspīdīgumu.
Vēl viena iespēja ir RGBa. Tas ļaus jums ievietot divs un joprojām panākt divam raksturīgo necaurspīdīgumu.
Pēdējā iespēja ir vienkārši izveidot daļēji caurspīdīgu .png attēlu vēlamajā krāsā vēlamajā attēlu redaktorā, iestatīt fona attēla īpašību uz attēla URL, un tad jums nebūs jāuztraucas par to, ka jums būs jāmaucas ar CSS un jāzaudē iespējas un organizācija, ko nodrošina ligzdota div struktūra.