Esiste un modo cross-browser per utilizzare i CSS per modificare l'ombreggiatura di un'immagine. Ad esempio, se ho un'icona in scala di grigio (elemento img), mi piacerebbe che cambiasse i colori in seppia al passaggio del mouse.Come colorare un'immagine in CSS?
Dovrebbe funzionare su browser diversi da IE, quindi non posso usare il filtro. C'è qualche trucco CSS 3 che lo permetterebbe?
se si desidera modificare un'immagine in css, non è possibile farlo. ma puoi giocare con la proprietà di opacità. sì, solo impostare l'opacità dell'immagine, ma sarà un buon effetto. qui è un esempio:
img{-webkit-transition:opacity .3s ease-in-out;}
img:hover{opacity:.6}
Questo frammento darà un piacevole effetto di transizione fade-in e fuori in immagine trasparente.
in altri casi, è possibile utilizzare image sprite per fare ciò che si desidera :)
Questa è la cosa più vicina a ciò che avevo in mente. Grazie! –
siete i benvenuti :) –
Non esiste una sintassi standardizzata cross-browser per questo che io conosca. Puoi, tuttavia, utilizzare HTML5 Canvas e farlo da solo. L'uso di SVG potrebbe anche funzionare, ma non sono sicuro di quanto bene tutti i browser, in particolare l'Internet Explorer, supportano SVG.
SVG esempio utilizzando una matrice di trasformazione del colore: http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml
Non c'è accurata modo per fare questo in CSS, come già detto è possibile utilizzare altre tecnologie per farlo - e cioè Javascript.
Nel molto di base senso, si potrebbe tentare di imitare uno stile di seppia sovrapponendo un div in cima ad un'immagine con una seppia come colore e un'opacità rgba(94, 38, 18, 0.2) - ma questo metodo è piuttosto grezzo. Si potrebbe anche sovrapporre usando un'immagine trasparente, che potrebbe essere migliore di questa opzione (ma ancora piuttosto spazzatura).
Nulla di ciò che conosco. Buona domanda però. +1 –
Probabilmente non è possibile con i CSS .. ma puoi farlo con alcuni Javascript e '
non penso che possa essere fatto solo per CSS. potreste voler provare una libreria js come paintbrushjs http://mezzoblue.github.com/PaintbrushJS/demo/index.html o pixastic http://www.pixastic.com/lib/ – ptriek