Ako v jazyku HTML umiestniť jeden obrázok na druhý?
Som začiatočník v programovaní rails, pokúšam sa zobraziť veľa obrázkov na stránke. Niektoré obrázky majú ležať na iných. Aby som to zjednodušil, povedzme, že chcem modrý štvorec, pričom v pravom hornom rohu modrého štvorca sa nachádza červený štvorec (ale nie tesne v rohu). Snažím sa vyhnúť kompozícii (pomocou ImageMagick a podobne) kvôli problémom s výkonom.
Chcem len umiestniť prekrývajúce sa obrázky vzhľadom na seba.
Ako zložitejší príklad si predstavte počítadlo kilometrov umiestnené vo vnútri väčšieho obrázka. Pre šesť číslic by som musel skomponovať milión rôznych obrázkov, alebo to všetko urobiť za behu, pričom stačí umiestniť šesť obrázkov na seba.
Toto je základný pohľad na to, čo som urobil, aby sa jeden obrázok vznášal nad druhým.
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
Tu'je kód, ktorý vám môže poskytnúť nápady:
<style>
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; right: 0; }
</style>
<div class="containerdiv">
<img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
<img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>Mám podozrenie, že Espo'ovo riešenie môže byť nevyhovujúce, pretože vyžaduje absolútne umiestnenie oboch obrázkov. Možno budete chcieť, aby sa prvý z nich umiestnil v toku sám.
Zvyčajne na to existuje prirodzený spôsob CSS. Na kontajnerový prvok umiestnite position: relative a potom absolútne umiestnite deti v ňom. Bohužiaľ, nemôžete umiestniť jeden obrázok do druhého. Preto som potreboval kontajnerový div. Všimnite si, že som z neho urobil float, aby sa automaticky prispôsobil svojmu obsahu. Urobiť ho display: inline-block by teoreticky malo fungovať tiež, ale podpora prehliadačov je v tomto prípade slabá.
EDIT: Z obrázkov som odstránil atribúty veľkosti, aby som lepšie ilustroval svoju myšlienku. Ak chcete, aby mal kontajnerový obrázok svoje predvolené rozmery, a vopred neviete, akú veľkosť má mať, nemôžete použiť trik background. Ak to viete, je to lepší spôsob.
Jednoduchý spôsob je použiť background-image a potom len vložiť do tohto prvku.
Druhý spôsob je použitie vrstiev css. Existuje množstvo dostupných zdrojov, ktoré vám s tým pomôžu, stačí vyhľadať css layers.
