테스트 사이트 - 개발 중인 베타 버전입니다

코딩 관련 문의 드립니다. (버튼영역이 겹치는 레이아웃) 채택완료

동물원 9년 전 조회 7,535

아래 첨부된 이미지와 같이 1~5번 버튼이 겹쳐져 보이게 하고, 각 버튼에 오버롤 효과를 주고 싶은데요.

버튼이 겹쳐져 있는 영역들이 있어서, 어떻게 구현해야 할 지 모르겠네요.

이런 경우에 어떻게 코딩해야 할까요?

조언 부탁 드려요.

 


 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
p
9년 전

https://jsfiddle.net/tmavxjkd/">https://jsfiddle.net/tmavxjkd/ 

 

대충 css 로 만들어봤습니다.

이런 식으로 하면 되지 않을까요?

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

아니면 버튼을 이미지로 만드신뒤에 png 파일로 70% 정도 투명도를 주신뒤 불어와서 겹치셔도 될것같아요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

</span></p><p><span style="font-size: 14pt;"><span style="font-size: 11pt;"><style></span>
</span><span style="font-size: 14pt;"><span style="font-size: 11pt;">div {</span>
</span><span style="font-size: 14pt;"><span style="font-size: 11pt;">    background-color: red;</span>
</span><span style="font-size: 14pt;"><span style="font-size: 11pt;">    </span><span style="color: rgb(255, 0, 0); font-size: 11pt;">opacity: 0.5;
</span></span><span style="font-size: 14pt;"><span style="font-size: 11pt;">    filter: Alpha(opacity=50); /* IE8 이하 호환을 위해서 */</span>
</span><span style="font-size: 11pt;">}</span>
<span style="font-size: 11pt;"></style></span>
<span style="font-size: 11pt;"><div>hello world</div></span></p><p><span style="font-size: 11pt;">

opacity 응용하시면 되실듯 합니다. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인