본문으로 바로가기

이미지 위에 객체 올리기

category [ Web 관련 ]/HTML, CSS 2021. 2. 23. 18:56
<style>
    table td.thumbnail .div-thumb {position: relative; width:70px; height:70px; padding:0px; magin:0px;}
    table td.thumbnail .div-thumb img{width:70px; height: 70px;}
    table td.thumbnail .over-open {position: absolute; top: 0px; left: 0px; padding:1px 2px; color:#ffffff; background-color: #3ba7ff; font-size: 8px !important;}
    table td.thumbnail .over-end {display: none; position: absolute; top: 0px; left: 0px; padding:1px 2px; color:#ffffff; background-color: #ff4d7c; font-size: 8px !important;}

</style>



<table cellspacing="0" cellpadding="0">
<td rowspan="2" class="thumbnail">
   <div class="div-thumb">
       <img src="/assets/img/sample1.png">
       <span class="over-open">진행중</span>
       <span class="over-end">종료</span>
   </div>
</td>
</table>