CSS style 로 이미지 위에 텍스트 표시 하기

<style>
.korea_medalx {width:548px;height:162px;background:url(ranking.gif) no-repeat;font-size:11px;font-family:돋움,Dotum,AppleGothic,serif; color:#666;position:relative;}
.korea_medalx .gold  {position:absolute;top:108px;left:184px;font:bold 16px Verdana; color:#f60;}
.korea_medalx .silver  {position:absolute;top:108px;left:247px;font:bold 16px Verdana; color:#353b3f;}
.korea_medalx .bronze  {position:absolute;top:108px;left:308px;font:bold 16px Verdana; color:#ba5af14;}
.korea_medalx .total  {position:absolute;top:110px;left:385px;font:bold 16px Verdana; color:#ff7062;}
.korea_medalx .rank  {position:absolute;top:110px;left:490px;font:bold 16px Verdana; color:#FF7062;}
.korea_medalx .link1  {position:absolute;top:138px;left:332px;width:93px;}
.korea_medalx .link2  {position:absolute;top:138px;left:446px;width:93px;}
</style>

<div class="korea_medalx">
<div class="gold">0</div>
<div class="silver">0</div>
<div class="bronze">0</div>
<div class="total">0</div>
<div class="rank">-</div>
<div class="link1"><a href="#"><img src="link1.gif"></a></div>
<div class="link2"><a href="#"><img src="link2.gif"></a></div>
</div>

 

ranking.gif 이미지를 배경 이미지로 표시하고 그 위에 position으로 텍스트 및 이미지를 표시 할 수 있습니다.