背景画像にテキストを表示するためのCSS

<div class="imgs">
  <!-- 背景画像 -->
  <div class="背景">
    <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" />
  </div>
  <!-- テキスト -->
  <div class="front">
    <div v-if="item.voteTime">
      <p>本当にありがとうございました！ </p>
      <p>投票しました: <span>{{item.voteTime}}</span></p>
    </div>
    <p v-else style="color:#999999">申し訳ありませんが、投票は完了していません～</p>
  </div>
</div>

データ（） {
  戻る {
    imgSrc1:require('@/common/imgs/yitoupiao.png'),
    imgSrc2:require('@/common/imgs/weiwancheng.png'),
  }
},

.imgs {
  背景: #fff;
  位置: 相対的;
  幅: 100%;
  高さ: 250px;
  色: #195541;
  。背景{
    // 幅:100%;  
    // height:100%; /**幅と高さは 100% なので、画像が画面いっぱいに表示されます*/
    // zインデックス:-1;
    zインデックス:1;
    位置: 絶対;
    幅: 250ピクセル;
    高さ: 100%;
    右: 20px;
    下: 0px;
  }
  。フロント{
    zインデックス:2;
    位置: 絶対;
    テキスト配置: 中央;
    トップ: 39%
    左: 25%;
    フォントの太さ: 標準;
    行の高さ: 40px;
    フォントサイズ: 28px;
  }
}