Estrapola la porzione di sfondo in css dallo sprite

Question

Gli sprite funzionano bene per le piccole icone che non cambiano le dimensioni, ma io tendo ad usare molte fette di sfondo larghe 1px per cose come gli sfondi pulsante e div. C'è un modo per includere queste fette negli sprite? Per fare ciò, ci deve essere un modo per prendere un piccolo pezzo da uno sprite e estrapolarlo su tutto lo sfondo dell'elemento, tagliandolo essenzialmente dallo sprite e lasciandolo ripetere come se fosse un'immagine di sfondo indipendente.

Answer 1

solo modo in cui posso pensare a dove ciò sarebbe possibile è con uno "stack SVG". L'idea di base è che ogni sprite è su un diverso "layer" nella stessa "piastrella", ma essi sono nascosti/rivelata attraverso un po 'di CSS all'interno del file in formato SVG:

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

Una più approfondita spiegazione qui : http://simurai.com/post/20251013889/svg-stacks

Ora, il lato negativo di questo metodo è che al momento funziona solo in Mozilla. Va bene, siamo in grado di aggirare che utilizzando gradienti lineari per garantire a tutti, ma Mozilla ottiene l'immagine di ripiego:

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

Una volta che gli altri browser salire a bordo con il supporto di frammenti su sfondi SVG, è possibile aggiungere il gradiente lineare appropriata prefissato per loro.

Poiché le immagini della tua bg sono piccole, la mia raccomandazione è di utilizzare un URI di dati. Sembrano qualcosa di simile:

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

Se vi aspettate di essere l'aggiornamento questa immagine con qualsiasi tipo di frequenza, Compass (un'estensione Sass) in grado di generare questi per voi automaticamente insieme minifying il CSS (vedi: http://compass-style.org/reference/compass/helpers/inline-data/#inline-image).

Answer 2

Sembra che si utilizzino immagini di 1px per gradienti. Immagino che tu voglia ripetere l'immagine in una sola direzione, non entrambe. In questo caso, puoi creare uno sprite di immagini di 1px. Il trucco è di disporre il tuo sprite in base alle direzioni in cui ripeterai le immagini. Fai attenzione anche se li posizionerai a destra o in basso, ad esempio, se la tua sfumatura dovesse andare in fondo a un contenitore, probabilmente vorresti posizionare quella sfumatura nella parte inferiore del tuo sprite. Se tutte le immagini vengono ripetute orizzontalmente, è possibile disporre i singoli file uno sull'altro. Mi piace avere una certa trasparenza tra le immagini, sia per allinearle con le linee della griglia sia per lasciare uno spazio sufficiente in modo che le altre immagini non vengano visualizzate.

Nella maggior parte dei browser tranne IE vecchio è possibile creare i gradienti tramite CSS senza utilizzare alcuna immagine. Per le vecchie versioni di IE dovresti usare le immagini.

Answer 3

Se ho capito bene, la risposta di Miriam è la risposta corretta.

Mi limiterò ad elaborare la risposta di Miriam con alcuni esempi.

Ecco uno sprite CSS di gradienti per utilizzare i pulsanti.

Usa CSS background-position di indirizzare il gradiente specifico che si desidera utilizzare per i pulsanti specifici.

Tuttavia i gradienti con le immagini non sono aggiornati. Per la maggior parte dei gradienti puoi semplicemente utilizzare i filtri CSS e IE per ottenere lo stesso risultato.È anche possibile creare sfumature piuttosto complesse con i CSS (IE ridurrà a un gradiente standard "da un colore a un colore" e, se si desidera davvero che l'utente IE8 abbia la stessa vista dei browser moderni, si possa comunque utilizzare un'immagine come fallback .

Qui è un grande strumento (photoshop-like) per creare sfumature e semplicemente/copia incolla il codice che genera: http://www.colorzilla.com/gradient-editor/