![見出し画像](https://assets.st-note.com/production/uploads/images/69776421/rectangle_large_type_2_c767a647b97ab73104904f51610bf744.png?width=1200)
画像と画像を重ねる方法【HTML/CSS】
※自分用の備忘録です。
positionで重ねる
HTML
<div class="relative">
<img class="absolute" src="img1.png" alt="画像1" width="100%">
<img class="absolute" src="img2.png" alt="画像2" width="50%">
</div>
CSS
.relative {
position: relative;
}
.absolute {
position: absolute;
}
positionで重ねる場合は、レスポンシブの際などにレイアウト崩れしやすいので要注意です。
SVGで重ねる
<svg viewBox="0 0 400 300">
<style>
</style>
<image xlink:href = "img1.png" width="100%" />
<image xlink:href = "img2.png" width="50%" />
</svg>
拡大縮小に強く、レスポンシブでもレイアウトが崩れにくいです。
xmlでの記述が必要なため、タグの終わりに「/」が必要な点に注意が必要です。
また、スタイルの記述もHTMLと違う場合があります。
スタイルはsvgタグ内に記述ができます。
この記事が気に入ったらサポートをしてみませんか?