HTML/CSS - Umieść img na górze img?

Question

Mam dwa png. Jeden to rzeczywisty obraz, inny to przeważnie przezroczysty obraz z ikoną ceny naklejki w prawym górnym rogu. Wiem, że mógłbym połączyć te w Photoshopie i po prostu stworzyć jeden obraz.

Ale potrzebuję, aby były generowane dynamicznie, na kilka różnych obrazów podstawowych.

Czy istnieje sposób kodowania "rzeczywistego obrazu", a następnie użycie kodu do nałożenia "przezroczystego obrazu naklejki"?

Answer 1

Musisz ustawić atrybut pozycji na względny lub bezwzględny, ustawić lewy i górny atrybut na pożądane wartości, a następnie ustawić atrybut z-index na 1 (zakładając, że nie masz innego indeksu Z). właściwości już ustawione). Należy pamiętać, że miejsce, w którym obraz ma się wyświetlać bez zmienionych atrybutów górnego i lewego, będzie miejsce, w którym powinno być.

Answer 2

Oczywiście, najprostszym sposobem byłoby absolutnie umieść oba obrazy w ich pojemniku:

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

position:relative na pojemniku jest potrzebne do pozycjonowania absolutnego dzieci do pracy. Oczywiście, jeśli pojemnik jest już sam w sobie, to jest w porządku.

position:absolute jest nie potrzebne na obrazie bazowym jeśli oba obrazy są w lewym górnym rogu, ale o to pozwala dostosować umieszczenie jej w razie potrzeby.

Można również użyć pozycji statycznej na głównym obrazie i względne położenie na obrazie nakładki:

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

ale za to do pracy trzeba by znać szerokość obrazu bazowego.

Answer 3

Zawiń obrazy w pliku <div> najpierw z obrazem nakładki, a następnie z obrazem rzeczywistym i ustaw wartość parametru css elementu div na position: relative.

Te dwa obrazy można następnie podać jako css {position: absolute; top: 0; left: 0;}.

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

Jeśli naprawdę chcesz być bezpieczny, można ustawić z-index każdego obrazu.