본문 바로가기
웹프로그램

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

by 세이박스 2008. 10. 8.
반응형
<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으로 텍스트 및 이미지를 표시 할 수 있습니다.

반응형

'웹프로그램' 카테고리의 다른 글

input 속성들  (0) 2008.10.08
특수 문자표  (0) 2008.10.08
CSS 텍스트 범위 벗어나면 숨기고 ... 붙이기  (0) 2008.10.08
CSS 웹폰트 설정 방법  (0) 2008.10.08
CSS 스타일시트 기본 속성  (0) 2008.10.08
CSS table 고정  (0) 2008.10.08
CSS position:absolute 위치를 상대경로로 잡기  (0) 2008.10.08
[ASP] session배열  (0) 2008.10.08