Autor | Zpráva | ||
---|---|---|---|
ondrej256 Profil * |
#1 · Zasláno: 27. 7. 2015, 17:01:46
Dobrý den,
nikde nemůžu dohledat jak se správně dá nastylovat divy jako vrstvy, Mám třeba 5 divů, kterým dám nějaký background-imiage, s průhleným pozadím, a přidat další vrstvu (div), který bude mít taky nějaký background-image s průhledným pozadím. Všechny divy mají stejný rozmět Mám něco takového: html: <div class="layer1"></div> <div class="layer2"></div> css: .layer1 { width: 152px; height: 331px; background: url('neco.png'); z-index: 1; } .layer2 { width: 152px; height: 331px; background: url('neco2.png'); z-index: 2; position: relative; top: -331px; /* kdybych chtel pridat treti vrstvu tak musim hodnotu zvýšit o dalších 331px, a u dalsich vrstev to samé */ } Což se mě nezdá jako nejšťastnější řešení. Dokazál by to někdo udělat líp? |
||
Bubák Profil |
#2 · Zasláno: 27. 7. 2015, 17:07:57
Nejjednodušší je DIVy do sebe zanořit:
<div class="layer1"> <div class="layer2"></div> </div> multiple-background .
|
||
tiso Profil |
#3 · Zasláno: 27. 7. 2015, 17:13:06
pridaj všetkým triedu layer:
.layer{width: 152px;height: 331px;position: absolute;} position: relative;
a z-index nemusíš uvádzať, pokiaľ zachováš poradie vrstiev.
Takže jednotlivým vrstvám už len pridáš rôzne pozadia. |
||
Tomáš123 Profil |
#4 · Zasláno: 27. 7. 2015, 17:16:24
ondrej256:
„Dokazál by to někdo udělat líp?“ Zmenil by som HTML na niečo takéto: <div class="pozadie obal"> <div class="pozadie layer1"></div> <div class="pozadie layer2"></div> <div class="pozadie layer3"></div> <div class="pozadie layer4"></div> <div class="pozadie layer5"></div> </div> .pozadie { width: 152px; height: 331px; position: absolute; } .obal { position: relative; } .layer1 { background-image: url(...); } .layer2 { background-image: url(...); } .layer3 { background-image: url(...); } .layer4 { background-image: url(...); } .layer5 { background-image: url(...); } |
||
ondrej256 Profil * |
#5 · Zasláno: 27. 7. 2015, 17:26:42
Dík za pohotovou odpověď, odzkouším
|
||
anonymníí Profil * |
#6 · Zasláno: 27. 7. 2015, 22:18:33
ondrej256:
Tomášův kód by měl fungovat, jen bych odebral u všech elementů třídu "pozadie", ta se zbytečně přemnožila. <div class="pozadie"> <div class="layer1"></div> <div class="layer2"></div> <div class="layer3"></div> <div class="layer4"></div> <div class="layer5"></div> </div> .pozadie, .pozadie > div { width: 152px; height: 331px; position: absolute; } .obal {position: relative;} .layer1 {background-image: url(...);} .layer2 {background-image: url(...);} .layer3 {background-image: url(...);} .layer4 {background-image: url(...);} .layer5 {background-image: url(...);} |
||
Tomáš123 Profil |
#7 · Zasláno: 28. 7. 2015, 06:17:02
anonymníí:
„ta se zbytečně přemnožila“ Pravda, ale omylom si asi odobral aj triedu obal , ktorá v CSS figuruje, úprava by mohla vyzerať hocijako (možno práve kvôli tej nutnosti dvakrát zapisovať som sa nechal zlákať na cestu premnoženia tried):
.pozadie, .pozadie > div { width: 152px; height: 331px; } .pozadie {position: relative;} .pozadie > div {position: absolute;} .layer1 {background-image: url(...);} .layer2 {background-image: url(...);} .layer3 {background-image: url(...);} .layer4 {background-image: url(...);} .layer5 {background-image: url(...);} |
||
Časová prodleva: 10 let
|
0