Jeg bruker noe som ligner på følgende kode:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Jeg forventet at dette skulle gi bakgrunnen en opasitet på 0,4 og teksten en opasitet på 100 %. I stedet har begge en opasitet på 0,4.
Barn arver opasitet. Det ville vært rart og upraktisk om de ikke gjorde det.
Du kan bruke en gjennomsiktig PNG-fil som bakgrunnsbilde eller en RGBa-farge (a for alpha) som bakgrunnsfarge.
Eksempel: 50 % nedtonet svart bakgrunn:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Jeg ville gjort noe sånt som dette
<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;
}
Det bør fungere. Dette forutsetter at du må ha et halvgjennomsiktig bilde, og ikke en farge (som du bare bør bruke rgba til). Det forutsettes også at du ikke bare kan endre bildets opasitet på forhånd i Photoshop.
Dette skyldes at den indre div-en har 100 % opasitet i forhold til div-en den er nestet i (som har 40 % opasitet).
Det er flere ting du kan gjøre for å omgå dette.
Du kan opprette to separate divs på denne måten:
<div id="background"></div>
<div id="bContent"></div>
Angi ønsket CSS-opasitet og andre egenskaper for bakgrunnen, og bruk egenskapen z-index (z-index) til å style og plassere bContent-div-en. På denne måten kan du plassere div-en over bakgrunnsdiv-en uten at dens opasitet påvirkes.
Et annet alternativ er RGBa. Dette gjør at du kan plassere divs i hverandre og likevel oppnå div-spesifikk opasitet.
Det siste alternativet er ganske enkelt å lage et halvgjennomsiktig .png-bilde i den fargen du ønsker i det ønskede bilderedigeringsprogrammet, angi bakgrunnsbildeegenskapen til URL-adressen til bildet, så slipper du å bekymre deg for å rote med CSS og miste muligheten og organiseringen av en nestet div-struktur.