ブログ散歩|はてなブログのオリジナル、カスタマイズ方法&インテリア

部屋のインテリア同様、ブログをお気に入りのオリジナルデザインにカスタマイズ方法を解説。と長くブログを楽しむ、続ける方法を工夫しています。

画像の上に画像を重ねる(中央寄せ)レスポンシブ

広告

2枚の画像を重ねます

f:id:hachi001:20180323011411p:plain f:id:hachi001:20180323005926p:plain

こんな感じ

f:id:hachi001:20180323011411p:plain

f:id:hachi001:20180323005926p:plain

relative に absolute を入れる

<div style="position:relative;">
     <img src="下の画像">
    <div style="position:absolute; left:50%; top:50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);">
        <img src="上の画像">
    </div>
</div>