Transparenz auf Text Hintergrund-Farbe ohne Überlappung

Ich möchte eine Hintergrundfarbe auf meine Überschrift hinzufügen, die den Text inline folgt, und ist halb transparent, aber ich möchte den Zeilenabstand beibehalten, während die Farbhintergrundüberlappung zu vermeiden zwischen den Zeilen. Die br sind zu Demonstrationszwecken.Transparenz auf Text Hintergrund-Farbe ohne Überlappung

<h2> 
<span>I like<br>Turtles<br>Do<br>You?</span> 
</h2>

Diese Geige erklärt alle: http://jsfiddle.net/chrisjimallen/teFdZ/105/

ich versucht habe, was ich denken kann, ist die nächste Lösung ist, den Span-Tag Inline Block, aber dann wird es ein Feld.

Quelle

2016-09-02 Chris J Allen

die Polsterung entfernen tun denke ich ... – kukkuz

mir scheint, dass @kukkuz hat einen Punkt - die line-height die sein muss, Größe der Schriftart plus jede aufgefüllte Füllung (und ein paar zusätzliche Pixel). Wenn Sie diese Zeilenhöhe beibehalten möchten, müssen Sie den oberen unteren Padding auf 1px reduzieren: http://jsfiddle.net/teFdZ/113/ (in Chrome - kann für andere Browser anders sein) – Pete

Suchen Sie? Spiel einfach mit Padding. Polsterung: 1px 10px 0px 10px; im Uhrzeigersinn (von oben rechts unten links)

h2 { font-family: sans-serif; 
 
font-size:30px} 
 
h2 span { 
 
    color:#fff; 
 
    line-height:35px; 
 
    display:inline; 
 
    background-color: rgba(252, 108, 33, 0.8); 
 
    padding:1px 10px 0px 10px; 
 
    -webkit-box-decoration-break: clone; 
 
    -ms-box-decoration-break: clone; 
 
    -o-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
}

<h2> 
 
<span>I Like<br>Turtles<br>Do<br>You?</span> 
 
</h2>

Quelle

2016-09-02 15:58:15 OpiX

Transparenz auf Text Hintergrund-Farbe ohne Überlappung

Antwort

Verwandte Themen