画像に文字を乗せる

画像に文字を乗せるには、画像のクラスのpositionを”relative”にする。
文字のクラスのpositionを"absolute"にし、位置を指定する。

.visual {
position: relative;
}

.visual p {
position: absolute;
width: 50%;
transform: translate(-50%,-50%);　/縦と横の文字のズレを修正
top: 45%; /画像のtopからの位置
left: 50%; /画像の左からの位置（右からにするには-50％とする）
/文字の装飾を指定する*/
}