ホームへ

【CSS】画像の上に画像を重ねる方法3選

htmlやCSSで要素を重ねるというのは少し難しいものです。

画像の上に画像を重ねる方法を3つ紹介します。

position:absoluteで重ねる

position:absoluteを使うと要素を重ねることができます。

<style>
.example{
    position: relative;
    display: inline-block;
}
.example img{
    display: block;
}
.example img:nth-of-type(2){
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" width="300">
    <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="" width="150">
</div>

divの中にimgが2つある状態です。

1つめが下になるほう、2つめが上に重なるほうです。

まずdivにはposition: relativeを指定します。これは重ねる画像の基準位置とさせるためです。

さらにdisplay: inline-blockを指定しています。これはdivの横幅を1つめのimgと同じにするためです。

次にimgにdisplay: blockを指定します。これはimgの下の空白を消すためです。下の空白が邪魔にならないならdisplay: blockは不要です。

最後に2つめのimgにposition: absoluteを指定します。さらにtopやleft、right、bottomで位置を調整します。

position:absoluteについて詳しくはこちら↓

backgroundで重ねる

backgroundは2つ以上指定することができ、重ねることができます。

<style>
.example2{
    width: 300px;
    height: 200px;
    background: 
        url(https://csshtml.work/wp-content/uploads/2.jpg) no-repeat bottom right / 150px auto,
        url(https://csshtml.work/wp-content/uploads/1.jpg) no-repeat center center / cover;
}
</style>
<div class="example2"></div>

backgroundで2つ以上の画像を指定するときは「,」で区切ります。先に記述した方が前面に、後に記述した方が後方になります。

background:前,後

backgroundの基本はこちら↓

重なった画像を作る

重ねた画像をずらす予定がないならムリにCSSを使わず、最初から重なった画像を用意するのも手です。

画像編集ソフトの利用が苦手なら、PowerPointで重ねて画面キャプチャし、画像編集ソフトで切り抜きだけするでもいいでしょう。

1つの画像になっているため画像を拡縮すると重ねた画像も同じ比率、同じ場所で拡縮してくれるのもメリットです。

【まとめ】画像の上に画像を重ねる方法

position:absoluteで重ねる

position:absoluteを使うと要素を重ねることができます。

backgroundで重ねる

backgroundで2つ以上の画像を指定するときは「,」で区切ります。先に記述した方が前面に、後に記述した方が後方になります。

重なった画像を作る

重ねた画像をずらす予定がないならムリにCSSを使わず、最初から重なった画像を用意するのも手です。

以上、画像の上に画像を重ねる方法でした。

マンガで読める関連記事