Zmena farby obrázka PNG pomocou CSS?

Možno sa budete chcieť pozrieť na písma Icon. http://css-tricks.com/examples/IconFont/

EDIT: Na svojom najnovšom projekte používam Font-Awesome. Môžete ho dokonca zavádzať. Jednoducho to vložte do svojho ``:

A potom pokračujte a pridajte nejaké ikony-odkazy, ako je tento:

<a class="icon-thumbs-up"></a>

Tu'je úplný cheat sheet

--edit--

Font-Awesome používa v novej verzii iné názvy tried, pravdepodobne preto, že sa tým súbory CSS výrazne zmenšili, a aby sa zabránilo nejednoznačným triedam css. Takže teraz by ste mali používať:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Práve som zistil, že aj github používa vlastný font ikon: Octicons Je zadarmo na stiahnutie. Majú aj niekoľko tipov ako si vytvoriť vlastné písmo ikon.

Značka img má vlastnosť background rovnako ako všetky ostatné. Ak máte biely PNG s priehľadným tvarom, ako je napríklad šablóna, môžete to urobiť:

Áno :)

Surfin' Safari - Archív blogu » CSS masky

WebKit teraz podporuje alfa masky v CSS. Masky umožňujú prekryť obsah rámčeka vzorom, ktorý možno použiť na vyradenie častí tohto rámčeka vo finálnom zobrazení. Inými slovami, na základe alfa farby obrázka môžete orezávať zložité tvary.
[...] Zaviedli sme nové vlastnosti, ktoré webovým dizajnérom poskytujú veľkú kontrolu nad týmito maskami a spôsobom ich použitia. Nové vlastnosti sú analogické k už existujúcim vlastnostiam pozadia a okrajového obrázka.

-webkit-mask (pozadie) -webkit-mask-attachment (pozadie-attachment) -webkit-mask-clip (pozadie-klip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)