CSS 画像の上に文字を置く

少し暇だったので、画像の上に文字を配置するようなことをしていたら、早速問い合わせがありました。
どうすれば、画像の上に文字を配置できるのか？と
教科書的には移動可能なdivタグ内に文字をおいて、絶対位置や相対位置を指定して配置する形だと思いますが、スマホと共用したいとのことなので(レシポンシブル的なもの)、絶対位置や相対位置が使えない場合も考えられるので、それっぽい方法をお伝えしました。

大きく育った猫草

①pタグの背景として画像を配置します。
②pタグにテキストを配置します。
③pタグサイズを適切に指定します。
※背景画像の指定は、多少独特な部分があるので、トライアンドエラーで調整してください。
④文字の修飾を指定してください。
※背景には画像があるので文字色のかぶりが気になります。
ここでは、袋文字にしています。

html部分です。 
<p class="mamaIMG shadow" 
style="background-image:url(https://stat.ameba.jp/XXXXX/XXXXX.jpg); COLOR:WHITE;">大きく育った猫草</p>

背景画像の属性指定 
@media screen and (max-width:480px) { 
  .mamaIMG{ 
  background-size : cover; 
  border-radius : 10px; 
  width : calc(100%-20px); 
  height : 220px; 
 ｝ 
@media screen and (min-width: 480px){ 
 .mamaIMG{ background-size : cover; 
 border-radius : 10px; 
 width : calc(100% -20px); 
 height : 360px; 
 ｝

簡単に指定はできるのですが、表示位置は思うようにはできません。
けれど大抵はこれでよいかと思われます。

表示する文字を袋文字にする
.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 15pt;
    text-shadow:
            1px 1px 1px #000, -1px -1px 1px #000,
           -1px 1px 3px #000,  1px -1px 1px #000,
            1px 0px 1px #000, -1px -0px 1px #000,
            0px 1px 3px #000,  0px -1px 1px #000;
    margin: 0;
}

文字サイズや袋部分はここで調整してください。

positionを使う場合も検討してみます。

いつも仲良しの3匹

ソースです

<div style="position:relative;">
<img src="https://stat.ameba.jp/user_images/20230212/17/ussr1917jp/84/7c/j/o1769118415242216314.jpg" width="98%" height="auto" alt="">
<p class="shadow" style="position:absolute;top:5px;left:60%;">いつも仲良しの3匹</p>
</div>

position:relative;を指定したブロック要素の中に画像と、position:absolute;を指定した文字列を指定するだけです。
表示位置は、この場合、position:absolute;を指定したpタグにtop、leftで指定しました。