OnkoKubo.sk

Obrázky vložené priamo do CSS

Možno sa už i vám stalo, že ste potrebovali vytvoriť čo najkopaktnejší HTML dokument, ktorý mal napriek malému počtu súborov (ideálne jednému) obsahovať aspo�? minimalistickú grafiku. Ide napríklad o tiene a iné gradienty.
Ja sám som tento problém riešil pri vytváraní XSLT šablóny. Chcel som v �?om mať obsiahnuté aj javascripty (vrátane frameworku jQuery) a kaskádové štýly.
Problém nastal, keď som chcel prvkom nastaviť ako pozadie gradient a pritom nepoužívať linky na externé zdroje. V tomto prípade je možné nastaviť ako URL obrázka jeho obsah zakódovaný pomocou base64.
Na tento účel veľmi dobre poslúžia online enkódery, ktorých je na webe neúrekom. Po uploade obrázka na�? stačí skopírovať už zakódovaný text. Ja som použil napr. tento . Takto získaný base64 reťazec už môžeme vložiť priamo do url pre pozadie.

.gradient {
     background: url(data:image/png;base64,base64string);
}

V mojom prípade je base64string nasledovný reťazec (bez zalomenia riadkov):

R0lGODdhAQAUAIQUAAddmQ1hmhNlnRppnyFuoShyoy93pjd7pz1/
qUSDq0uIrlKMsFmQsmCVtGaZtm2euHWiunynvYOrvomwwI6zwo6zwo6z
wo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwo6zwiwAAAAAAQAUAAAFES
AQCANRGAeSKAvTOA8USVMIADs=

Takto naštýlovanú triedu môžeme hneď použiť:

<div class="gradient">Trieda s pozadím</div>

A ako sa potom takto naštýlovaný element zobrazí?

Trieda s pozadím

Jediným jediným problémom ostáva prehliadač MSIE, ktorému sa v starších verziách takto definovaný obrázok vôbec nepáči.

Tags: CSS, HTML, obrázok, XSLT

Príspevok pridaný Štvrtok, Február 25th, 2010 o 17:29 do kategórie Programovanie.

2 komentárov to “Obrázky vložené priamo do CSS”

stevo Napísal(a):
Február 25th, 2010 o 18:51
pekne
Onko Napísal(a):
Február 25th, 2010 o 19:22
NJ, skusal som to uz vkladat do atributu src pri , ale toto sa mi zda este lepsie. Samozrejme musim povedat, ze viem, ze CSS, JS a podobne zalezitosti treba odkladat do externych zdrojov . Ide o extremne riesenie vynimocnej situacie.

Obrázky vložené priamo do CSS

2 komentárov to “Obrázky vložené priamo do CSS”

Pridať komentár