【CSS】画像の上に文字を入れる方法（Pクラス複数）

画像の上にテキストを重ねる方法

※HTML

<div class=”example example2″>
<img src=”https://eenjin.com/wp-content/uploads/2019/10/dashPAKU0492_TP_V.jpg” />
<p>テキストテキストテキスト</p>
<p2>テキストテキスト</p2>
</div>

※CSS

.example {
position: relative;
}

.example p {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
font-size: 14px;
font-weight: bold;
color: #000000;

}
.example p2 {
position: absolute;
top: 60%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
font-size: 27px;
font-weight: bold;
color: #000000;
text-shadow: 1px 2px 0 #fff;
}

.example img {
width: 100%;
}

ぶっちゃけP2でいいかはよくわからん・・・