Posso convertire un'immagine in CSS3?

Question

Supponendo che ho un file immagine PNG poligono come questo (No confine, la forma è riempita con un colore, senza pendenza, e lo sfondo dell'immagine è trasparente) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

Sto pensando di utilizzare quell'immagine poligono come immagine di sfondo e verrà modificata (in un'altra immagine con colori diversi) quando l'utente si posiziona su di essa.

Ma voglio anche che il colore dell'immagine di sfondo sia personalizzabile. Quindi, sto pensando se c'è la possibilità di disegnare il poligono invece di usare i file di immagine in modo che il colore sia personalizzabile (non penso sia una buona idea creare un file per un colore e così via) .

• Qual è la soluzione migliore per questo caso? Usando png o disegnandolo con css?
• C'è uno strumento/sito web per convertire il mio png in codice css?

Answer 1

1. Effettuare le aree bianche trasparenti (colore a alpha in GIMP)
2. Convert the image to a data URI (è facoltativa ma renderà il vostro carico sito più veloce)
3. utilizzare l'URL in (2) come il background-image e utilizzare qualsiasi background-color desiderato.

Answer 2

Utilizzare questo per convertire un'immagine: http://codepen.io/blazeeboy/pen/bCaLE Penso che sia molto meglio usare immagini convertite perché i browser li caricano più velocemente.

Answer 3

Penso che i CSS siano la cosa sbagliata da usare per questo. Sì, è possibile creare molte forme usando i CSS, ma ci sono dei limiti e, in ogni caso, disegnare forme con i CSS è un po 'un trucco, anche quando si tratta di un semplice triangolo.

Piuttosto che CSS, suggerirei SVG è gli strumenti appropriati per questo lavoro.

SVG è un formato grafico per grafica vettoriale che può essere incorporato in un sito e può essere creato o modificato tramite Javascript direttamente all'interno del sito. Cambiare il colore e la forma di un semplice poligono è facile come con SVG.

L'altro vantaggio dell'utilizzo di SVG è che, essendo una grafica vettoriale, è scalabile, quindi è possibile visualizzarlo a qualsiasi dimensione.

L'unico lato negativo di SVG è che non è supportato dalle vecchie versioni di IE (IE8 e precedenti). Tuttavia, questi browser supportano un linguaggio alternativo chiamato VML e esistono diverse librerie Javascript valide che funzioneranno con entrambe, consentendo quindi la completa compatibilità cross-browser. Quello che raccomanderei è Raphael.js.

Quindi un piccolo (e molto facile) bit di codice Javascript invece di un bit molto disordinato di CSS. Sembra un vincitore per me.