【CSS】画像の上に文字を重ねて表示する方法

画像に文字を重ねて表示したい時に使用できるCSSの書き方。

画像の上に文字を重ねて表示

HTML

<div class="parent">
    <img src="./images/sample.png" />
    <p>サンプル</p>
</div>

CSS

.parent {
    position: relative;
}

.parent p {
    position: absolute;
    color: #ffffff;
    top: 0;
    left: 0;
}

結果

画像に重ねた文字を中央に表示

HTML

<div class="parent">
    <img src="./images/sample.png" />
    <p>サンプル</p>
</div>

CSS

.parent {
    position: relative;
    width: 300px;
}

.parent img {
    width: 100%;
}

.parent p {
    position: absolute;
    color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

結果