Wie Hintergrund Hintergrund zu Text hinzufügen (mehrere Zeilen)

Ich fand diese jsfiddle im Internet. Weiß jemand von euch, wie ich die Hintergrundfarbe von Weiß in eine Verlaufsfarbe ändern kann? Die Verlaufsfarbe sollte bei jeder neuen Zeile "neu gestartet" werden. Bitte beachten Sie gewünschten Wunsch auf "Beispiel 2" in diesem Bild: http://www.managers.dk/css-text-background.jpg Wie Hintergrund Hintergrund zu Text hinzufügen (mehrere Zeilen)

http://jsfiddle.net/omgmog/g3MQf/

h1 { width:480px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; } 

h1 { 
background: #fff; 
display:inline; 
white-space: pre-line; 
position: relative; 
padding: 9px 0; 
line-height: 54px; 
-moz-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff; 
-webkit-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff; 
box-shadow: -20px 0 0 #fff, 20px 0 0 #fff; 
}

Dank!

Quelle

2016-05-04 amadeo

Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie zusätzliche Recherchen anstellen, entweder über Google oder indem Sie SO suchen, einen Versuch unternehmen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –

Wenn Sie auch mit einem vertikalen Gradienten zufrieden sind, verwenden Sie einfach 'linear-gradient': http://jsfiddle.net/g3MQf/71/ – Aloso

nicht gut genug, um eine Antwort zu sein, aber vielleicht ein Kompromiss http: // jsfiddle .net/g3MQf/74/Mix-Blend-Modus, wo Browser es versteht :( –

Ich glaube nicht, dass es einen Weg gibt, um das zu erreichen, was Sie in einfachem CSS suchen, da es keinen Selektor "neue Zeile" gibt. Die einzige Möglichkeit besteht darin, jede neue Zeile explizit zu definieren, indem der Text in ein span-Element eingeschlossen wird.

body 
 
{ 
 
    padding:50px; 
 
    background:#fff; 
 
} 
 
h1 
 
{ 
 
    width:480px; 
 
    font:bold 36px sans-serif; 
 
    letter-spacing:-1px; 
 
    color:#000; 
 
    display:inline; 
 
    white-space: pre-line; 
 
    position: relative; 
 
    padding: 9px 0; 
 
    line-height: 54px; 
 
} 
 
h1 span 
 
{ 
 
    background: -moz-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%); 
 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(148,199,247,1)), color-stop(100%, rgba(32,124,229,1))); 
 
    background: -webkit-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%); 
 
    background: -o-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%); 
 
    background: -ms-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%); 
 
    background: linear-gradient(to right, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#94c7f7', endColorstr='#207ce5', GradientType=1); 
 
} 
 

 
header 
 
{ 
 
    width: 550px; 
 
}

<body> 
 
    <header> 
 
    <h1> 
 
     <span>Some dynamic HTML text on</span> 
 
     <span>several lines with a background</span> 
 
     <span>that suits well and some margins</span> 
 
     <span>around it.</span> 
 
    </h1> 
 
    </header> 
 
</body>

Quelle

2016-05-04 11:29:20 phpheini

es funktioniert nur, wenn Sie jedes Stück in Spannen, wo Leerraum sollte beibehalten werden Texteinzug und mach das :). –

http://jsfiddle.net/g3MQf/73/ Dies benötigt keine Spannen, aber sobald sich der Text ändert, ist der Box-Schatten verzerrt :( – Aloso

Wenn Sie die Zeilenhöhe auf einen höheren Wert setzen, wird es aussehen – phpheini

Bitte überprüfen Sie meine Antwort aktualisiert. Ich habe background-attachment:fixed; hinzugefügt, um die gewünschte Ausgabe zu erhalten.

h1 { width:480px; font:bold 28px sans-serif; letter-spacing:-1px; color:#fff; 
 
background: -webkit-linear-gradient(left, #085d9d 0%, #92d5ff 100%); 
 
background: -moz-linear-gradient(left, #085d9d 0%, #92d5ff 100%); 
 
background: -o-linear-gradient(left, #085d9d 0%, #92d5ff 100%); 
 
background: linear-gradient(to right, #085d9d 0%, #92d5ff 100%); 
 
background-attachment:fixed; 
 
display: inline; 
 
line-height: 50px; 
 
padding: 7px 3px; 
 
white-space: pre-wrap; 
 
}

<h1>Some dynamic HTML text on several lines with a background that suits well and some margins around it.</h1>

Quelle

2016-05-04 11:42:14

Ähnliche Antwort ist unter;) – phpheini

und: es funktioniert nur, wenn Sie jedes Stück in Spannen, wo Leerraum war Angenommen, den Texteinzug zu behalten und dies zu tun :). –

@phpheini Ja, ich habe ähnliche Antwort gepostet, aber in meiner Antwort habe ich linear-gradient-Stil nach seinem Bedarf geändert. –

Wenn Sie mit Steigungen nicht vertraut sind gibt es Tools gibt, die Ihnen es optisch mehr tun helfen. Ein solches Werkzeug ist http://www.colorzilla.com/gradient-editor/, mit dem Sie Ihren Farbverlauf visuell erstellen können. Klicken Sie dann auf eine Schaltfläche, um den Code zum Einfügen in Ihre CSS-Datei zu kopieren. Es bietet Ihnen Browser-sichere Optionen für die meisten der wichtigsten Browser. fügen Sie es einfach zu Ihrem Hintergrund-CSS-Code hinzu und es sollte das von Ihnen gewünschte Ergebnis ergeben.

Ich hoffe, das hilft!

Quelle

2016-05-04 13:11:11 Cutter

Wie Hintergrund Hintergrund zu Text hinzufügen (mehrere Zeilen)

Antwort

Verwandte Themen