ugrás a tartalomhoz

Többszörös háttérkép elérése egyenként

zzrek · 2010. Május. 1. (Szo), 23.59
Sziasztok!

Legújabban már lehet egy elemnek több háttérképet is megadni, pl:

background-image: url(../images/img1.png), url(../images/img2.png);

De vajon ki tudom-e cserélni (külön) a második képet javascripttel (anélkül hogy a teljes backgroundImage szöveget lecserélném); tudok-e változtatni rajta css-sel?

Például meg lehet-e csinálni, hogy css-sel egy osztályhoz definiálok egy első háttérképet, egy másik osztályhoz egy másodikat, és ha egy elemnek mindkét osztályt megadom, akkor mindkét kép látszódik?

Köszönöm!
‹ Felolvasó GUI készítése ›
 ■
1

Még nem igazán

Thomas · 2010. Május. 2. (V), 10.52
Sajnos a több háttérkép megadását még csak kevés, a CSS3-at támogató böngésző kezeli.

Itt meg tudod nézni, hogy mi a jelenlegi állást. Eléggé elkeserítő :)
2

IE8

zzrek · 2010. Május. 2. (V), 11.00
Csak az IE8-cal van probléma (webalkalmazást fejlesztek és nem követelmény az IE7 sem), de ott megoldom filterrel (alphaimageloader-rel ráteszek még egy képet a normál háttérre). Egyébként IE8-on épp ezért nem is lenne gondom, hiszen az egyik class-szal hozzárendelem az egyik háttérképet, a másik class definíciójába pedig egy filtert teszek, így a kettőt kombinálva css-sel választhatom ki külön-külön a kettős hátteret.
3

Úgy is jó lenne

zzrek · 2010. Május. 2. (V), 11.13
Úgy is jó lenne, ha lenne olyan inline 'szelektor' amivel arra tudom utasítani a böngészőt, hogy a <style> részben megadottat használja, pl:

.dblimg {background-image: url(../images/img1.png), url(../images/img2.png);
....

<div class="dblimg1" style="background-image: url(../images/img3.png), useglobalstyle;"
Van valami olyasmi, amit a "useglobalstyle" helyére beírva elintézhetem, hogy a class-hoz tartozó második háttérképet használja?

Köszi!
4

osztályváltás

Drawain · 2010. Május. 2. (V), 11.42
Ilyen esetben szerintem a legjobb megoldás, ha a háttérkép-változatokat külön css osztályokra rakod, és JS-el ezeket az osztályokat váltod. Ezzel megmarad az a lehetőség is, hogy később elég a css kódot módosítani, nem kell a JS-hez nyúlni.
5

Persze

zzrek · 2010. Május. 2. (V), 18.12
Persze, én is így gondoltam, de nem ez a gondom, hanem az, hogy 2 képpel szeretném ezt megcsinálni.
Ekkor vagy 2 divet rakok egymás tetejére, vagy megpróbálom kihasználni az új lehetőséget, a "multiple backgrounds"-ot.
Pl. képzeld el, hogy van 10 féle polcom és 10 féle árum, és ezeket szeretném variálni, akármelyik polcra akármelyik árut rátenni: nem akarok 100 féle osztályt létrehozni ha nem muszáj.
6

Azt hiszem megvan a megoldás

zzrek · 2010. Május. 2. (V), 18.23
Azt hiszem megvan a megoldás: img elemet fogok használni, ennek külön megadhatom az src attribútumát és még background-image-t is tudok neki adni, ezzel minden további nélkül működni fog IE8-cal is.
(De azért ha létezik olyasmi CSS szelektor, amire utaltam, akkor arra kíváncsi lennék...)
További szép napot!