Wie kann ich dynamisch einen grünen Hintergrund hinter Text hinzufügen, nicht die gesamte Seitenbreite, nur den Text.
Mit meinem aktuellen Code dehnt sich das Grün auf die gesamte Seite aus. Ich bin nicht in der Lage, HTML oder Javascript zu ändern, nur die CSS-Datei.
<h1>The Last Will and Testament of Eric Jones</h1>
h1 {
text-align: center;
background-color: green;
}
Fügen Sie den Text in ein Inline-Element ein, z. B. ein <span>
.
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
Und dann die Hintergrundfarbe auf das Inline-Element anwenden.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
Ein Inline-Element ist so groß wie sein Inhalt, das sollte also genügen.
Ein sehr einfacher Trick, um dies zu tun, ist ein <span>
Tag hinzuzufügen und diesem eine Hintergrundfarbe zu geben. Es wird genau so aussehen, wie Sie es wollen.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
Und CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
-Tag in einem Inline-Element-Tag, so dass es nur über den Inhalt spannt, um den Effekt vorzutäuschen.
Versuchen Sie, die Textausrichtung center zu entfernen, und zentrieren Sie den Text in <h1>
oder <div>
.
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}