CSS nepriehľadnosť len pre farbu pozadia, nie pre text na ňom?

Zdá sa, že chcete použiť priehľadné pozadie, v tom prípade môžete skúsiť použiť funkciu rgba():

rgba(R, G, B, A)

R (červená), G (zelená) a B (modrá) môžu byť buď s alebos, kde číslo 255 zodpovedá 100 %. A (alfa) môže byť medzi 0 a 1 alebo, kde číslo 1 zodpovedá 100 % (úplná nepriehľadnosť).

Príklad RGBa

rgba(51, 170, 51, .1) / 10% nepriehľadná zelená / rgba(51, 170, 51, .4) / 40% nepriehľadná zelená / rgba(51, 170, 51, .7) / 70% nepriehľadná zelená / rgba(51, 170, 51, 1) / úplne nepriehľadná zelená /

Malý [príklad][2], ktorý ukazuje, ako možno použiť rgba.

Od roku 2018 prakticky **každý prehliadač podporuje syntax rgba.

Najjednoduchšie to urobíte pomocou 2 divov, 1 s pozadím a 1 s textom:

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

Nemôžete. Musíte mať samostatný div, ktorý je len týmto pozadím, aby ste mohli použiť krytie len naň.

Nedávno som to skúšal urobiť, a keďže som už používal jQuery, zistil som, že najmenej problémov mi spôsobuje nasledujúci postup:

1. Vytvorte dva rôzne divy. Budú to súrodenci, nebudú sa nachádzať jeden v druhom ani nič podobné.
2. Divu text dajte jednoliatu farbu pozadia, pretože to bude predvolená farba bez JavaScriptu.
3. Pomocou jQuery získajte výšku divu text a aplikujte ju na div background.

Som si istý, že existuje nejaký CSS ninja spôsob, ako to všetko urobiť len pomocou floatov alebo niečoho podobného, ale nemal som trpezlivosť na to prísť.