A list layout CSS code that uses a picture to make a div background

Ideas:

1. Because it is a vertical list, the outer layer is relatively positioned so that it does not overlap together relative

2. Absolute the inside with absolute position, cover the picture above

3. Here is a little trick, I have a special effect, text erect, and rotate to the right 90 degrees (WebKit core) width:20px; font-size:20px; -webkit-transform:rotate (90DEG);

<div style="position:relative; max-width:560px; min-height:115px ;">"/resources/images/hongbao_ky.png"style="width:100%; max-width:560px; min-height:115px ;"/><div style="position:absolute; color: #ffffff; top:8%; left:3% ;"><div style="width:20px; font-size:20px;-webkit-transform:rotate (90deg);">2016.1. -</div></div><div style="position:absolute; left:20%; top:0; color: #211b1a;"> -&nbsp;&nbsp;&nbsp;&nbsp; Voucher 12312312
A list layout CSS code that uses a picture to make a div background