Autor Zpráva
ondrej256
Profil *
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
Nejjednodušší je DIVy do sebe zanořit:
        <div class="layer1">
                <div class="layer2"></div>
        </div>
CSS 3 umožňuje pro jeden element deklarovat několik pozadí, multiple-background.
tiso
Profil
pridaj všetkým triedu layer:
.layer{width: 152px;height: 331px;position: absolute;}
vnor ich do ďalšieho divu s rozmermi a 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
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>
A CSS obdobne modifikoval a skrátil zároveň:
.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 *
Dík za pohotovou odpověď, odzkouším
anonymníí
Profil *
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
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(...);}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: