Heim > Web-Frontend > CSS-Tutorial > Wie kann ich einen farbigen Texthintergrund hinzufügen, ohne die Elementbreite zu erweitern?

Wie kann ich einen farbigen Texthintergrund hinzufügen, ohne die Elementbreite zu erweitern?

Linda Hamilton
Freigeben: 2024-12-01 00:11:11
Original
835 Leute haben es durchsucht

How Can I Add a Colored Text Background Without Expanding Element Width?

Farbiger Texthintergrund, ohne die Breite des gesamten Elements zu beeinflussen

Manchmal möchten Sie möglicherweise bestimmten Text mit einer Hintergrundfarbe hervorheben, ohne die Breite des Elements zu beeinflussen das gesamte Element. In diesem Szenario können Sie den HTML-Code nicht ändern, um ein Inline-Element wie hinzuzufügen. Tag.

Lösung:

Die Lösung liegt in der Nutzung der natürlichen Breite eines Inline-Elements. Durch Platzieren des Texts in einem Inline-Element, z. B. einem Tag kann die Hintergrundfarbe speziell auf dieses Element angewendet werden.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>
Nach dem Login kopieren

Sobald der Text im Inline-Element platziert ist, wenden Sie die Hintergrundfarbe mit CSS auf den Bereich an:

h1 {
    text-align: center; 
}
h1 span {  
    background-color: green; 
}
Nach dem Login kopieren

Dieser Ansatz stellt sicher, dass die Hintergrundfarbe nur den Text innerhalb des Inline-Elements beeinflusst und den gewünschten Effekt beibehält, ohne die Breite des gesamten h1-Elements zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich einen farbigen Texthintergrund hinzufügen, ohne die Elementbreite zu erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage