Wie erstelle ich in CSS einen textbreiten Hintergrund, ohne das gesamte Element zu beeinträchtigen?

Erstellen von textbreiten Hintergründen in CSS ohne elementweite Farbe

Das Erreichen eines textbreiten Hintergrunds, ohne ihn auf das gesamte Element auszudehnen, ist möglich stellen eine Herausforderung in CSS dar. So lösen Sie das Problem:

Text in einem Inline-Element isolieren

Da Sie den HTML-Code nicht ändern dürfen, besteht Ihre Lösung darin, den Text innerhalb eines Inline-Elements einzuschränken Element, wie ein . Dadurch beschränken Sie den Umfang der Hintergrundfarbe auf den Text selbst.

Hintergrundfarbe auf Inline-Element anwenden

Sobald der Text im können Sie die Hintergrundfarbe mühelos auf das Inline-Element anwenden. Dadurch wird sichergestellt, dass die Farbe auf die Textgrenzen beschränkt bleibt.

Beispielimplementierung

Um diese Technik zu veranschaulichen, betrachten Sie den folgenden überarbeiteten Code:

HTML :

<h1 id="span-The-Last-Will-and-Testament-of-Eric-Jones-span"><span>The Last Will and Testament of Eric Jones</span></h1>

CSS:

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

Durch Einschließen des Textes ein und indem Sie die Hintergrundfarbe auf den Bereich anwenden, erstellen Sie erfolgreich einen textbreiten Hintergrund, ohne die Breite des Hauptelements zu ändern.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS einen textbreiten Hintergrund, ohne das gesamte Element zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!