티스토리 뷰
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 |
댓글