Hintergrundfarbe für Textbreite nur in CSS

Sie möchten einen grünen Hintergrund hinter dem Text in einem

anwenden. Element, aber nicht über die gesamte Seitenbreite. Ihr aktueller Code unten wird das nicht erreichen:

<h1>
  The Last Will and Testament of Eric Jones
</h1>

Nach dem Login kopieren

h1 { 
  text-align: center; 
  background-color: green; 
}

Nach dem Login kopieren

Da Sie den HTML-Code nicht so ändern können, dass er ein Inline-Element wie enthält, besteht die Lösung darin, den Text in ein Inline-Element zu konvertieren Element. Dies kann erreicht werden, indem der Text in ein eingeschlossen wird. Element und Anwenden der grünen Hintergrundfarbe darauf:

<h1>
  <span>The Last Will and Testament of Eric Jones</span>
</h1>

Nach dem Login kopieren

h1 {
  text-align: center; 
}
h1 span { 
  background-color: green; 
}

Nach dem Login kopieren

Inline-Elemente erstrecken sich nur über die Breite ihres Inhalts und stellen so sicher, dass der grüne Hintergrund nur hinter dem Text und nicht auf der gesamten Seite erscheint.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Hintergrundfarbe auf Text in einem Element anwenden, ohne die gesamte Seitenbreite zu beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!