Extrapolieren Hintergrund Slice in CSS von Sprite

Question

Sprites funktionieren gut für kleine Symbole, die Dimensionen nicht ändern, aber ich neige dazu, viele 1px breite Hintergrund-Slices für Dinge wie Button und div Hintergründe zu verwenden. Gibt es eine Möglichkeit, diese Scheiben in Sprites zu integrieren? Um dies zu tun, muss es möglich sein, ein kleines Stück aus einem Sprite zu nehmen und es über den gesamten Hintergrund des Elements zu extrapolieren, es im Wesentlichen aus dem Sprite zu schneiden und es so zu wiederholen, als wäre es ein eigenständiges Hintergrundbild.

Answer 1

Die nur Weise kann ich daran denken, wo dies möglich wäre, ist mit einem "SVG-Stack". Die Grundidee ist, dass jedes Sprite auf einer anderen „Schicht“ auf der gleichen „Kachel“ ist, aber sie sind versteckt/offenbart durch ein bisschen CSS in der SVG-Datei:

<style> 
    svg .icon { display: none } 
    svg .icon:target { display: inline } 
</style> 

Eine mehr in die Tiefe Erklärung hier : http://simurai.com/post/20251013889/svg-stacks

Nun, der Nachteil dieser Methode ist, dass es derzeit nur in Mozilla funktioniert. Das ist in Ordnung, wir können um Arbeit, die lineare Verläufe durch Verwendung jeder, um sicherzustellen, aber Mozilla wird das Ersatz-Image:

.element { 
    background: url(myBG.png); 
    background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG); 
} 

Sobald andere Browser an Bord zu holen mit Fragmenten auf SVG Hintergründe unterstützt, können Sie die entsprechende Präfix hinzufügen linearen Gradienten für Sie.

Da Ihre bg-Bilder klein sind, empfehle ich eine Daten-URI. Sie sehen etwas wie folgt aus:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg=="); 

Wenn Sie erwarten, mit jeder Art von Frequenz dieses Bild zu aktualisieren, Kompass (a Sass Erweiterung) können diese erzeugen automatisch für Sie zusammen mit minifying CSS (siehe: http://compass-style.org/reference/compass/helpers/inline-data/#inline-image).

Answer 2

Es klingt wie Sie 1px breite Bilder für Farbverläufe verwenden. Ich schätze, Sie möchten das Bild nur in einer Richtung wiederholen, nicht beides. Wenn dies der Fall ist, können Sie ein Sprite mit 1 Pixel breiten Bildern erstellen. Der Trick besteht darin, Ihr Sprite in die Richtung zu legen, in der Sie die Bilder wiederholen. Achte auch darauf, ob du sie rechts oder unten positionierst. Wenn dein Farbverlauf zum Beispiel am unteren Rand eines Containers sein soll, solltest du diesen Farbverlauf wahrscheinlich am unteren Rand deines Sprites positionieren. Wenn sich alle Ihre Bilder horizontal wiederholen, können Sie sie einzeln übereinander legen. Ich möchte eine gewisse Transparenz zwischen den Bildern haben, entweder um sie mit Rasterlinien auszurichten oder um genügend Platz zu lassen, damit die anderen Bilder nicht angezeigt werden.

In den meisten Browsern mit Ausnahme von alten IE können Sie die Steigungen durch CSS ohne Verwendung von Bildern erstellen. Für alte Versionen von IE müssten Sie Bilder verwenden.

Answer 3

Wenn ich Sie richtig verstehe, ist Miriam Antwort die richtige Antwort.

Ich werde nur mit einigen Beispielen auf Miriams Antwort eingehen.

Hier ist ein CSS-Sprite von Farbverläufen, um Tasten zu verwenden.

Verwenden CSS background-position des spezifischen Gradienten Sie für bestimmte Tasten verwenden möchten Ziel.

Allerdings sind Farbverläufe mit Bildern veraltet. Für die meisten Gradienten können Sie einfach CSS und IE-Filter verwenden, um das gleiche Ergebnis zu erzielen.Sogar sehr komplexe Gradienten können mit CSS erstellt werden (IE wird auf einen Standardfarbverlauf "einer Farbe zu einer Farbe" zurückgreifen. Und wenn Sie wirklich möchten, dass IE8-Benutzer die gleiche Ansicht wie moderne Browser haben, können Sie ein Bild als Fallback verwenden .

Hier ist ein großes Werkzeug (photoshop-like) Gradienten zu erzeugen und erzeugt sie kopieren/einfach den Code einfügen: http://www.colorzilla.com/gradient-editor/