de-vraag
  • Otázky
  • Značky
  • Používatelia
Oznámenia
Odmeny
Registrácia
Po registrácii budete informovaní o odpovediach a komentároch na vaše otázky.
Prihlásiť sa
Ak už máte konto, prihláste sa a skontrolujte nové oznámenia.
Za pridané otázky, odpovede a komentáre budú udelené odmeny.
Viac na
Zdroj
Upraviť
 rrichter
rrichter
Question

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.

238 2008-09-07T14:31:25+00:00 3
 computingfreak
computingfreak
Edited question 19 september 2016 в 10:49
Programovanie
graphics
html
css
optimization
This question has 1 odpoveď in English, to read them log in to your account.
 Espo
Espo
7 september 2008 в 2:42
2008-09-07T14:42:30+00:00
Viac na
Zdroj
Upraviť
#8443340

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">

Zdroj

 Nhan
Nhan
Edited answer 2 december 2016 в 11:56
73
0
 buti-oxa
buti-oxa
7 september 2008 в 3:37
2008-09-07T15:37:03+00:00
Viac na
Zdroj
Upraviť
#8443341

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>

JSFiddle

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.

 Community
Community
Edited answer 23 máj 2017 в 11:47
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
39
0
Chris Bartow
Chris Bartow
7 september 2008 в 2:40
2008-09-07T14:40:21+00:00
Viac na
Zdroj
Upraviť
#8443339

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.

5
0
Pridať otázku
Kategórie
Všetky
Technológia
Kultúra / Rekreácia
Život / Umenie
Veda
Profesionálne
Obchod
Používatelia
Všetky
New
Popular
1
Zuxriddin Muydinov
Registered pred 11 hodinami
2
Денис Анненский
Registered pred 2 dňami
3
365
Registered pred týždňom
4
True Image
Registered pred týždňom
5
archana agarwal
Registered pred týždňom
DE
EL
ES
FR
ID
IT
JA
KO
LT
NL
PT
RU
SK
TR
ZH
© de-vraag 2022
Zdroj
stackoverflow.com
na základe licencie cc by-sa 3.0 s uvedením autora