Wie kann ich verhindern, dass meine untergeordneten Elemente Deckkraft erben?

Informationen zur Deckkraft und Vererbung des CSS-Hintergrunds

In CSS steuert die Eigenschaft opacity die Transparenz eines Elements. Standardmäßig ist die Deckkraft auf 1,0 eingestellt, was bedeutet, dass das Element vollständig undurchsichtig ist. Niedrigere Deckkraftwerte weisen auf eine zunehmende Transparenz hin.

Wenn mehrere verschachtelte Elemente unterschiedliche Deckkraftwerte haben, erben die untergeordneten Elemente die Deckkraft ihres übergeordneten Elements. Das bedeutet, dass alle untergeordneten Elemente eines Elements mit reduzierter Deckkraft auch die gleiche reduzierte Deckkraft haben, sofern Sie nicht ausdrücklich etwas anderes angeben.

Behebung des Problems mit geerbter Deckkraft

In Obwohl das innere Div im bereitgestellten Code eine Deckkraft von 1,0 hat, wird es mit einer Deckkraft von 0,4 angezeigt, da es die für sein übergeordnetes Div festgelegte Deckkraft erbt. Um dieses Problem zu lösen, gibt es einige Optionen:

• Verwenden Sie ein durchscheinendes PNG-Bild: Erwägen Sie für das Hintergrundbild die Verwendung einer PNG-Datei, die von Natur aus halbtransparent ist (z. B. , hat eine verringerte Deckkraft). Dadurch wird sichergestellt, dass der Hintergrund richtig transparent ist und gleichzeitig die volle Deckkraft des Textes erhalten bleibt.

• Verwenden Sie RGBA-Farben: Für die Hintergrundfarbe können Sie RGBA (Rot, Grün) verwenden , Blau, Alpha) Werte. Alpha stellt die Transparenz dar, wobei 0 vollständig transparent und 255 vollständig undurchsichtig ist. Durch die Angabe eines RGBA-Werts mit einer Alpha-Komponente von weniger als 255 können Sie einen durchscheinenden Hintergrund erzielen, während der Text vollständig undurchsichtig bleibt. Zum Beispiel:

  <code class="css">div {
  background-color: rgba(0, 0, 0, 0.5); /* 50% faded black background */
  }</code>

  Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass meine untergeordneten Elemente Deckkraft erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!