| 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