최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

HTML에서 투명버튼 영역을 div로 만들어 주고,
1
2
3
4
5
6
<!-- btnContainer -->
  <div id="btnContainer">
   <div id="btn00"></div>
   <div id="btn01"></div>
   <div id="btn02"></div>
  </div>

 

css에서 처리하는 기법이 크게 3가지 정도로 나뉜다.

 

1. background:url(#) 0 0 repeat; 처리.

1
2
#btnContainer{position:absolute;width:255px;height:362px;}
#btn00{position:absolute;left:745px;top:28px;width:255px;height:121px;cursor:pointer;background:url(#) 0 0 repeat;}

 

2. 가로세로 1px인 투명gif를 width, height늘려서 채우기.

 

3. 일단 css에서 background-color:#000000;

1
2
#btnContainer{position:absolute;width:255px;height:362px;}
#btn00{position:absolute;left:745px;top:28px;width:255px;height:121px;cursor:pointer;background-color:#000000;}

 

 

 

이후 js에서 투명처리

1
2
3
$("#btn00").stop().css({opacity:0});

$("#btn00").stop().animate({opacity:0});

 

'■ 프론트엔드 ■ > CSS' 카테고리의 다른 글

cursor - 마우스 버튼(손가락)표시  (0) 2013.10.14
margine 속성 순서  (0) 2013.10.14
css display  (0) 2013.10.14
position  (0) 2013.10.14
margin과 padding의 차이  (0) 2013.10.14
댓글