画像のうえに複数の文字を重ねる方法【CSS】

今回はCSSで画像の上に複数の文字を重ねる方法を記載します。

やりたいこと

画像のうえに、「カテゴリ名」と「日付」を表示したいという案件が発生したので複数表示させる方法を調べました。
やりたいこととしては下記のような表示方法です。

画像参照：LIG

画像に「NEW」と「アイコン」が重なって表示されています。こんな感じのを目標にします。

対応方法

対応方法を記載します。HTML、CSSで対応します。
今回は画像に「カテゴリ名」と「日付」を表示させる方法を記載します。
※「カテゴリ名」は「グルメ」、「日付」は「2018/12/8」と表示させます。

HTML

  <div class="img_box">
     <img src="resource/img/item/pan.JPG">
       <ul>
         <li class="tag_box">グルメ</li>
         <li class="date_box">2018/12/8</li>
       </ul>
   </div> 

CSS

.img_box{
   position: relative;
   }
.img_box li{
   position: absolute;
   padding: 10px ;
}
.img_box .tag_box {
   top: 10px;
   left: 10px;
   background-color: #9d6437;
   font-weight: bold;
   line-height: 2.17;
   color: #ffffff;
}
.img_box .date_box {
   color: #a46032;
   background-color: #ffffff;
   right: 10px;
   bottom: 10px;
   border: solid 2px #a46032;
}
.img_box img{
   width: 100%;
}

以上です。

完成画像

下記のようになります。

左上に「グルメ」、右下に「日付」が表示されるようになりました。

文字の修正等は
カテゴリの方は「.img_box .tag_box」を変更
日付の方は「.img_box .date_box」を変更
してください。

--- 🥐---

※パンの画像は下記サイトより参照しました。