CSS-Deckkraft nur für die Hintergrundfarbe, nicht für den Text?

Es hört sich so an, als ob Sie einen transparenten Hintergrund verwenden möchten. In diesem Fall könnten Sie versuchen, die Funktion rgba() zu verwenden:

rgba(R, G, B, A)

R (Rot), G (Grün) und B (Blau) können entweder oder sein, wobei die Zahl 255 100% entspricht. A (Alpha) kann eine zwischen 0 und 1 oder ein sein, wobei die Zahl 1 100% (volle Deckkraft) entspricht.

RGBa Beispiel

rgba(51, 170, 51, .1) / 10% opakes Grün / rgba(51, 170, 51, .4) / 40% deckendes Grün / rgba(51, 170, 51, .7) / 70% gedecktes Grün / rgba(51, 170, 51, 1) / vollständig deckendes Grün /

Ein kleines [Beispiel][2], das zeigt, wie rgba verwendet werden kann.

Ab 2018 unterstützt praktisch jeder Browser die rgba-Syntax.

Am einfachsten geht das mit 2 Divs, 1 mit dem Hintergrund und 1 mit dem Text:

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

Das können Sie nicht. Sie müssen ein separates Div haben, das nur dieser Hintergrund ist, so dass Sie die Deckkraft nur auf diesen anwenden können.

Ich habe versucht, dies zu tun vor kurzem, und da ich bereits mit jQuery, fand ich die folgenden zu sein, die am wenigsten Ärger:

1. Erstellen Sie die beiden unterschiedlichen Divs. Sie werden Geschwister sein, nicht ineinander enthalten oder etwas.
2. Geben Sie dem "Text"-Div eine einfarbige Hintergrundfarbe, da dies der JavaScript-freie Standard sein wird.
3. Verwenden Sie jQuery, um die Höhe des "Text"-Divs zu ermitteln, und wenden Sie sie auf das "Hintergrund"-Div an.

Ich bin mir sicher, dass es eine Art CSS-Ninja-Weg gibt, um all das nur mit Floats oder so zu machen, aber ich hatte nicht die Geduld, es herauszufinden.