CSS: creazione di sfondi con texture

Attualmente sto cercando di impostare uno sfondo dell'immagine per il mio sito che verrà caricato abbastanza velocemente. Ho usato l'immagine dell'URL di dati e anche le immagini optomizzate, ma sta prendendo troppo tempo quando si carica la pagina poiché l'immagine backgournd è ancora molto grande. È possibile con i CSS creare un colore di sfondo strutturato come quello nella figura sotto? qui è un EXAMPLE CSS: creazione di sfondi con texture

ho provato e non sono stati in grado di corrispondere a questo:

enter image description here

fonte

2012-08-05 CodingWonders90

Utilizzare un'immagine di sfondo affiancata, è l'unico modo per ottenere informazioni dettagliate. Sicuramente * non * usare un URI 'data:'. Sembra che quel particolare modello possa essere tranquillamente ripetuto ad una dimensione piuttosto piccola se si cambia leggermente la trama per essere piastrellabile. – Ryan

Puoi facilmente [ottenere ciò usando SVG e CSS] (https://stackoverflow.com/a/49108254) in circa 400 byte. Come bonus, puoi aggiungere un gradiente senza costi aggiuntivi. –

con l'ultima tecnologia CSS3, è possibile creare texture di sfondo. Controlla: http://lea.verou.me/css3patterns/#

ma è ancora limitato su così tanti aspetti. Anche il supporto del browser non è così pronto.

la soluzione migliore è utilizzare l'immagine di piccole dimensioni e ripetere su tale sfondo. si potrebbe ottenere qualche bel pronto all'uso immagine Struttura qui:

http://subtlepatterns.com

fonte

2012-08-05 04:46:14 Kamal

anche http://patternify.com – albert

Grazie! Proprio quello che stavo cercando! – CodingWonders90

@albert, Nod 32 bloccato ** patternify.com ** e dice La pagina Web è nell'elenco dei siti Web con contenuto potenzialmente pericoloso. – stom

si dovrebbe provare affettare l'immagine, se possibile, in un pezzo più piccolo che potrebbe essere ripetuto. Ho ridotto l'immagine a un'immagine 101x101px.

BG Tile

CSS:

body{ 
    background-image: url(SO_texture_bg.jpg); 
    background-repeat:repeat; 
}

Ma in alcuni casi, non saremmo in grado di tagliare l'immagine ad una più piccola. In tal caso, userei l'intera immagine. Ma potresti anche usare i metodi CSS3 come quello che Mustafa Kamal aveva menzionato.

Vi auguro buona fortuna.

fonte

2012-08-05 05:03:07

Solo curioso, c'è un motivo per cui hai scelto 101 pixel? Sembra una dimensione non standard, e mi chiedo se c'è una ragione per questo. –

Se si cerca un convertitore Image Base 64, è possibile incorporare alcuni piccoli file di texture dell'immagine come codice nella sezione di codice @import url(''). Sembrerà un sacco di codice; ma almeno tutti i tuoi dati sono ora memorizzati localmente - piuttosto che dover chiamare una risorsa separata per caricare l'immagine.

Esempio collegamento: http://www.base64-image.de/

Quando prendo un file dal mio inventario di una semplice icona in formato PNG, e convertirlo in base 64, sembra che questo nel mio CSS:

url('data:image/png;base64,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')

Con le immagini della trama, è necessario utilizzare un processo simile.

fonte

2016-09-02 05:08:18 IvanRider

Utilizzare un editor di immagini per ritagliare una parte dello sfondo, quindi applicare la proprietà di ripetizione dello sfondo del CSS per fare in modo che la piccola immagine riempia l'area in cui viene utilizzata.

In alcuni casi, la ripetizione dello sfondo crea cuciture dove si ripete l'immagine. Una soluzione consiste nell'utilizzare un editor di immagini come segue: a partire dall'immagine di sfondo, copiare l'immagine, capovolgere (specchiare, non ruotare) la copia da sinistra a destra e incollarla sul bordo destro dell'originale, sovrapponendo 1 pixel . Ritaglia per rimuovere 1 pixel dal bordo destro dell'immagine combinata. Ora ripeti per la verticale: copia l'immagine combinata, capovolgi la copia dall'alto verso il basso, incollala nella parte inferiore del pixel sovrapposto combinato e sovrapposto. Ritaglia per rimuovere 1 pixel dal fondo. L'immagine risultante dovrebbe essere priva di cuciture.

fonte

2017-05-08 12:46:36

CSS: creazione di sfondi con texture

risposta

Problemi correlati