HTMLで画像と画像を重ねる。これを使えば、画像の一覧ページなどで達成者にマークをつけるなどが簡単にできる!

お客様のサイトで、画像が複数並んでいるサイトがあります。(目標を掲載しているページ)

それで目標達成した人の画像にキレイに達成マークをつけたい!!

上記内容を達成するのであれば、画像を変更してアップロードし直す方法がありますが・・・
そんなこと毎回やっていたら、めんどくさい

そんな時には、画像の上に透過の画像を重ねる事によって、達成マークが画像の上に表示されるように見えます。

(1) ベースの画像
tassei

(2) 上に重ねる画像
tassei

やりたいこと

(1)の画像の上に(2)の画像を重ねると(3)の結果になります。

(3) 結果


ソース

以下のソースで実現可能です。

<style>
.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 0px;
    top: 0px;
}
</style>
<div class="relative">
<img src="(1)の画像パス" />
<img src="(2)の画像パス" class="absolute"  />
</div>

これで作業もバッチリ!!


You may also like...