2010-12-13 5 views
2

est-il possible de changer la couleur de fond de par exemple. la première icône de this site avec CSS3, ou les extensions CSS de WebKit?Comment imbriquer un img avec CSS3

Je suis nouveau à ce sujet et j'apprécierais de l'aide. Un lien ou un exemple serait génial.

Merci à l'avance.

+0

Pourriez-vous donner un exemple de ce que vous voulez dire en dessinant l'icône? Voulez-vous changer sa couleur? Sa taille? –

+0

Aha! Gotcha, acclamations. –

+0

Vous pouvez également essayer -webkit masques (documentation très clairsemée cependant) –

Répondre

0

Essayez

img { 
    background-color: #FF00FF; 
} 
+0

Cela ne fonctionnera pas réellement si. Vous obtiendrez un fond blanc, puis l'image (qui a un fond noir) sur le dessus, cachant complètement le fond blanc. Cette déclaration n'aura aucun effet sur l'image elle-même. –

+0

ce sera si l'image a la transparence définie moins de 100% – Thariama

+0

sûr, c'est juste l'image de l'exemple qu'il a lié ne l'a pas fait. –

0

Oui, vous pouvez créer une image avec css3. Mais quelque chose me dit que vous remettez en question est en fait plus précise que cela ressemble ..

1

Si l'image de l'icône avait un fond transparent, vous pouvez alors définir la couleur d'arrière-plan CSS derrière l'image comme ceci:

background: #c00 url(kombine-iphone-icons.png); /* Puts a red background behind the icon image */ 

Malheureusement, il n'y a rien en CSS 3 (ou l'une des extensions CSS de WebKit) qui vous permet de changer la couleur des images.

2

Bien que vous puissiez styler une image, la modification de la couleur de l'icône n'est pas possible dans CSS3 car elle nécessite des modes de fusion.

Vous pouvez y parvenir avec HTML5 Canvas

// Color 

var over = someCanvas.getContext('2d'); 

// Icon 
var under = anotherCanvas.getContext('2d'); 

over.blendOnto(under, 'screen', {destX:30,destY:15}); 

utilisation https://github.com/Phrogz/context-blender pour y parvenir.

Questions connexes