CSS-opacitet kun på baggrundsfarven, ikke på teksten på den?

Det lyder som om, du ønsker at bruge en gennemsigtig baggrund, i hvilket tilfælde du kan prøve at bruge funktionen rgba():

rgba(R, G, B, A)

R (rød), G (grøn) og B (blå) kan være enten s ellers, hvor tallet 255 svarer til 100%. A (alpha) kan være et mellem 0 og 1 eller en, hvor tallet 1 svarer til 100 % (fuld uigennemsigtighed).

RGBa eksempel

rgba(51, 170, 51, 51, .1) / 10% uigennemsigtig grøn / rgba(51, 170, 51, 51, .4) / 40 % uigennemsigtig grøn / rgba(51, 170, 51, .7) / 70% uigennemsigtig grønt / rgba(51, 170, 51, 51, 1) / helt uigennemsigtig grøn /

Et lille [eksempel][2], der viser, hvordan rgba kan bruges.

Fra 2018 understøtter praktisk talt [alle browsere syntaksen rgba] (https://caniuse.com/#feat=css3-colors).

Den nemmeste måde at gøre dette på er med 2 divs, 1 med baggrunden og 1 med teksten:

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

Det kan du ikke. Du skal have en separat div, som kun er denne baggrund, så du kun kan anvende opaciteten på den.

Jeg prøvede at gøre dette for nylig, og da jeg allerede brugte jQuery, fandt jeg følgende som det mindst besværlige:

1. Opret de to forskellige divs. De'vil være søskende, ikke indeholdt i hinanden eller noget.
2. Giv text div'en en ensfarvet baggrundsfarve, fordi det vil være den JavaScript-løse standardfarve.
3. Brug jQuery til at få text div's højde, og anvend den på background div'en.

Jeg'er sikker på at der'er en slags CSS ninja måde at gøre alt dette med kun floats eller noget, men jeg havde'ikke tålmodighed til at finde ud af det.