CSS neprozornost samo za barvo ozadja, ne pa tudi za besedilo na njem?

Zdi se, da želite uporabiti prozorno ozadje, zato lahko poskusite uporabiti funkcijo rgba():

rgba(R, G, B, A)

R (rdeča), G (zelena) in B (modra) so lahko s alis, pri čemer število 255 ustreza 100 %. A (alfa) je lahko med 0 in 1 ali, pri čemer število 1 ustreza 100 % (popolna neprosojnost).

Primer RGBa

rgba(51, 170, 51, .1) / 10 % neprozorna zelena / rgba(51, 170, 51, .4) / 40 % neprozorna zelena / rgba(51, 170, 51, .7) / 70 % neprozorna zelena / rgba(51, 170, 51, 1) / popolnoma neprozorna zelena /

Majhen [primer][2], ki prikazuje, kako se lahko uporablja rgba.

Od leta 2018 praktično **vsak brskalnik podpira sintakso rgba.

To najlažje storite z dvema divoma, 1 z ozadjem in 1 z besedilom:

-- begin snippet: js hide: false -->

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Ne morete. Morate imeti ločen div, ki je samo to ozadje, tako da lahko prekrivnost uporabite samo zanj.

Pred kratkim sem to poskusil storiti in ker sem že uporabljal jQuery, sem ugotovil, da je najmanj težav povzročalo naslednje:

1. Ustvarite dva različna diva. Bosta sorojenca, ne bosta vsebovana drug v drugem ali kaj podobnega.
2. Divu text dajte enotno barvo ozadja, saj bo to privzeta barva brez JavaScript-a.
3. S programom jQuery pridobite višino diva text in jo uporabite za div background.

Prepričan sem, da obstaja kakšen ninja način CSS, kako vse to narediti samo s floati ali kaj podobnega, vendar nisem imel potrpljenja, da bi to ugotovil.