2010-12-13 6 views
2

ist es möglich, die Hintergrundfarbe von z. das erste Symbol von this site mit CSS3 oder WebKit CSS-Erweiterungen?Wie style ich ein img mit CSS3

Ich bin neu und würde einige Hilfe schätzen. Ein Link oder ein Beispiel wäre toll.

Vielen Dank im Voraus.

+0

Können Sie ein Beispiel geben, was Sie meinen, wenn Sie das Symbol formatieren? Willst du seine Farbe ändern? Seine Größe? –

+0

Aha! Gotcha, Prost. –

+0

Sie können auch -webkit Masken versuchen (sehr spärliche Dokumentation) –

Antwort

0

Versuche

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

Das wird aber nicht funktionieren. Sie erhalten einen weißen Hintergrund, dann das Bild (das einen schwarzen Hintergrund hat) darüber, den weißen Hintergrund vollständig verbergend. Diese Deklaration wirkt sich nicht auf das Bild selbst aus. –

+0

wird es, wenn das Bild Transparenz eingestellt weniger als 100% – Thariama

+0

sicher hat, ist es nur das Beispiel Bild, das er verknüpft hat, tat es nicht. –

0

Ja, Sie können ein Bild mit CSS3 stylen. Aber etwas sagt mir, dass Sie die Frage ist eigentlich mehr spezifisch, dass es aussieht ..

1

Wenn das Symbol Bild einen transparenten Hintergrund hat, dann könnten Sie die CSS-Hintergrundfarbe hinter dem Bild gesetzt wie dies:

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

Leider gibt es nichts in CSS 3 (oder eine der WebKit CSS-Erweiterungen), mit dem Sie die Farbe der Bilder ändern.

2

Sie können zwar ein Bild stylen, aber das Ändern der Farbe von Icon ist in CSS3 nicht möglich, da hierfür die Blending-Modi erforderlich sind.

Sie können diese

// Color 

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

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

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

Verwendung mit HTML5 Canvas erreichen https://github.com/Phrogz/context-blender um dies zu erreichen.