Wie setze ich mit CSS eine Hintergrundfarbe für die Breite des Texts und nicht für die Breite des gesamten Elements?

143

Was ich möchte, ist, dass der grüne Hintergrund direkt hinter dem Text liegt und nicht 100% der Seitenbreite. Hier ist mein aktueller Code:

h1 { 
    text-align: center; 
    background-color: green; 
}
<h1>The Last Will and Testament of Eric Jones</h1>
Erweitern Sie das Snippet

html  css 
— Hithere Papiertüte
quelle
Kann dies ohne Zeitspanne geschehen?
— Thomas-Peter
Um das Hinzufügen der Spanne zu vermeiden, hätten Sie die <h1> -Anzeigeeigenschaft von Block in Inline ändern können (der Haken ist, Sie hätten sichergestellt, dass die Elemente nach <h1> Blockelemente sind.
— Dan

Antworten:

185

Fügen Sie den Text in ein Inline-Element ein , z <span>.

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

Wenden Sie dann die Hintergrundfarbe auf das Inline-Element an.

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

Ein Inline-Element ist so groß wie sein Inhalt, das sollte es für Sie tun.

— BalusC
quelle
6
Danke, es ist eine Schande, ich kann den HTML-Code nicht ändern.
— Thomas-Peter
@ Tom: Sie können JavaScript verwenden, um eine Spanne zu setzen.
— BalusC
1
Danke, aber ich habe nur die Erlaubnis, das CSS zu ändern. Keine Ursache.
— Thomas-Peter
20
Fügen Sie einfach die Anzeige-CSS-Regel zum h1-Selektor hinzu. Sie müssen kein <span> -Tag hinzufügen. So:h1 { display:inline; }
— Ludo - Off the record
2
display: table ist eine bessere Wahl ... um das Problem zu vermeiden, das in der nächsten Antwort im Kommentarbereich hervorgehoben wird. display: inline verkettet <h1> und <h2> in derselben Zeile .... wenn sie ursprünglich in den nächsten Zeilen stehen.
— ihightower
65

Option 1

display: table;

  • Kein Elternteil erforderlich

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>
Erweitern Sie das Snippet

Geige

http://jsfiddle.net/J7VBV/293/

Mehr

display: table Weist das Element an, sich wie eine normale HTML-Tabelle zu verhalten.

Mehr dazu bei w3schools , CSS Tricks und hier

Option 2

display: inline-flex;

  • erfordert text-align: center;auf Eltern

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>
Erweitern Sie das Snippet

Option 3

display: flex;

  • erfordert einen flexiblen übergeordneten Container

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>
Erweitern Sie das Snippet

Über

Der wahrscheinlich beliebteste Leitfaden für Flexbox und einer, auf den ich ständig verweise, ist CSS Tricks

Option 4

display: block;

  • erfordert einen flexiblen übergeordneten Container

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>
Erweitern Sie das Snippet

Option 5

::before

  • erfordert die Eingabe von Wörtern in die CSS-Datei (nicht sehr praktisch)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1>
Erweitern Sie das Snippet

Geige

http://jsfiddle.net/J7VBV/457/

Über

Mehr über CSS- Pseudoelemente :: vorher und :: nachher bei CSS Tricks und Pseudoelemente allgemein bei w3schools

Option 6

display: inline-block;

  • zentrieren mit position: absoluteundtranslateX

  • erfordert einen position: relativeElternteil

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
  <h1>The Last Will and Testament of Eric Jones</h1>
Erweitern Sie das Snippet

Über

Weitere Informationen zum Zentrieren mit transform: translate();(und zum Zentrieren im Allgemeinen) finden Sie in diesem Artikel zu CSS-Tricks

Option 7

text-shadow: und box-shadow:

  • nicht das, wonach das OP gesucht hat, aber vielleicht hilfreich für andere, die ihren Weg hierher finden.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}
<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>
Erweitern Sie das Snippet

Geige

https://jsfiddle.net/Hastig/t8L9Ly8o/

Mehr Optionen

Es gibt noch einige andere Möglichkeiten, um dies zu erreichen, indem Sie die verschiedenen Anzeigeoptionen und Zentrierungsmethoden oben kombinieren.

— Hastig Zusammenstellen
quelle
Dies ohne Container und ohne Pseudoelemente zu tun, ist einfach fantastisch! display: tableIch hatte keine Ahnung, dass das so mächtig sein könnte, aber ich schätze, dass Sie funktionierende Alternativen bereitgestellt haben.
— CPHPython
52

Ein bisschen spät zum Spiel, aber ich dachte, ich würde meine 2 Cent hinzufügen ...

Um das Hinzufügen des zusätzlichen Markups eines inneren Bereichs zu vermeiden, können Sie die <h1>Anzeigeeigenschaft von blockin ändern inline(fangen Sie an, Sie hätten sichergestellt, dass die Elemente nach den <h1>Blockelementen sind.

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

Ergebnis
Geben Sie hier die Bildbeschreibung ein
JSFIDDLE http://jsfiddle.net/J7VBV/

— Dan
quelle
2
Richtig? "Ja wirklich?" Auf diese Weise wird die Überschrift nicht mehr zentriert (da sie inline angezeigt wird). Die Frage von OP beinhaltet eindeutig die Forderung nach einer zentrierten Überschrift.
— BalusC
1
@BalusC - Nein, wo in der ursprünglichen Frage das OP ausdrücklich angibt, dass die Überschrift zentriert werden muss. Bei der Frage wird klar gefragt, wie der grüne Hintergrund nicht in voller Breite angezeigt werden kann. #justSaying
— Dan
2
Der Screenshot von OP und das anfängliche CSS von OP implizieren etwas anderes.
— BalusC
5
Das vielleicht, aber wir sprechen hier von Einzelheiten - nicht von Annahmen.
— Dan
1
Dies hat zu Problemen in Fällen geführt, in denen <h1> - und <h2> -Tags sofort in den nächsten Zeilen stehen. Dann werden <h1> und <h2> in derselben Zeile angezeigt. Die folgende Option display: table ist eine gute Wahl, wenn Sie den Quellcode der <h1> <h2> -Tags selbst nicht ändern möchten, sondern nur das CSS.
— ihightower
8

Ein sehr einfacher Trick besteht darin, ein <span>Tag und eine Hintergrundfarbe hinzuzufügen. 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; }

WARUM?

<span> Tag in einem Inline-Element-Tag, sodass es sich nur über den Inhalt erstreckt, der den Effekt vortäuscht.

— Starx
quelle
4

BEARBEITEN: Die Antwort unten würde in den meisten Fällen zutreffen. OP erwähnte jedoch später, dass sie nichts anderes als die CSS-Datei bearbeiten konnten. Aber lassen Sie dies hier, damit es für andere von Nutzen sein kann.

Geben Sie hier die Bildbeschreibung ein

Die wichtigste Überlegung, die andere vernachlässigen, ist, dass OP angegeben hat, dass sie den HTML-Code nicht ändern können.

Sie können gezielt auf das zugreifen, was Sie im DOM benötigen, und dann Klassen dynamisch mit Javascript hinzufügen. Dann stylen Sie nach Bedarf.

In einem Beispiel, das ich gemacht habe, habe ich alle <p>Elemente mit jQuery als Ziel ausgewählt und es mit einem Div mit einer Klasse von "farbig" umwickelt.

$( "p" ).wrap( "<div class='colored'></div>" );

Dann zielte ich in meinem CSS auf das <p>und gab ihm die Hintergrundfarbe und wechselte zudisplay: inline

.colored p {
    display: inline;
    background: green;
}

Wenn Sie die Anzeige auf Inline einstellen, verlieren Sie einen Teil des Stils, den sie normalerweise erben würde. Stellen Sie also sicher, dass Sie auf das spezifischste Element abzielen und den Container so gestalten, dass er zum Rest Ihres Designs passt. Dies ist nur als Ausgangspunkt gedacht. Vorsichtig verwenden. Arbeitsdemo auf CodePen

— JGallardo
quelle
3

h1 ist ein Blockebenenelement. Sie müssen stattdessen so etwas wie span verwenden, da es sich um ein Inline-Level-Element handelt (dh es erstreckt sich nicht über die gesamte Zeile).

In Ihrem Fall würde ich Folgendes vorschlagen:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
— Andy
quelle
3

Wie die anderen Antworten vermerken, können Sie a background-colorzu a hinzufügen<span> Ihrem Text , damit dies funktioniert.

In dem Fall, in dem Sie jedoch haben line-height, werden Sie Lücken sehen. Um dies zu beheben, können Sie box-shadowIhrer Spanne ein bisschen Wachstum hinzufügen . Sie möchten auch, dass box-decoration-break: clone;FireFox es richtig rendert.

BEARBEITEN: Wenn Sie in IE11 Probleme mit dem Box-Shadow haben, versuchen Sie, auch eine outline: 1px solid [color];für IE hinzuzufügen .

So sieht es in Aktion aus:

Beispiel für die CSS-Technik

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}
<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>
Erweitern Sie das Snippet

— Coburn
quelle
2

Versuchen Sie, den Text-Ausrichtung Zentrum entfernt und das Zentrum <h1>oder <div>in den Text befindet.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
— AgnosticDev
quelle
1

Sie können das HTML5- <mark>Tag verwenden.

HTML:

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

CSS:

mark
{
    background-color: green;
}
— Dan Bray
quelle
1
OP brauchte eine
— reine
0

Probier diese:

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

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

Bitte beachten Sie, dass calc nicht mit allen Browsern kompatibel ist :) Ich möchte nur mit der Ausrichtung im ursprünglichen Beitrag übereinstimmen.

https://jsfiddle.net/richardferaro/ssyc04o4/

— Richard Feraro
quelle
0

Sie müssen die Breite des h1-Tags angeben.

Ihr CSS wird so sein

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
— Ramya
quelle
0

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1>

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

Demo auf Codepen

— TiiGRUS
quelle
Firefox erfordert box-decoration-break: clone;, developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
— Coburn
0

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}
— LuckyThe4thJr
quelle
3
Jede Antwort, die nur Code enthält, könnte für Leute, die nach einer Lösung für dieses Problem suchen, viel nützlicher sein, wenn Sie Ihrer Antwort einen Kontext hinzufügen könnten.
— David Buck
-2 

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>
Erweitern Sie das Snippet

— Anish Kumar Gupta
quelle
Gut. Das ist ein Code. Nur ein Code. Es ist völlig frei von Erklärungen. Dies hat den Nebeneffekt, dass sich das Verhalten der Überschrift in Bezug auf den Inhalt um sie herum ändert. Es sagt nichts aus, was stackoverflow.com/a/32919558/19068 und stackoverflow.com/a/20257339/19068 noch nicht gesagt haben
— Quentin
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.