Mozilla 한국 커뮤니티

http://www.hedgerwow.com/360/dhtml/css- ... herit.html

저 위 사이트의 예제 말이죠..

알파값을 가진 div 안의 내용들의 알파값이 상속되지 않게 하기위해서
의미없는 다른 div를 만들어서 z-index로 깔아버리는...거까지는 이해를 했어요.
(방식은 이해했지만 코드를 봐도 어떻게 동작하는지는 잘 모르겠더군요..--;)

브라우져를 안가리고 잘 동작한다고 하던데 익스 7.0에서는 뒤에 반투명 div 부분이 안나오더군요.(익스6.0/파폭에서는 잘동작하는것을 확인)

사실 저 예제를 봐도 어떤 원리로 동작하는지 이해가 안됩니다..ㅠㅠ
그래서 뭐가 문제인지도 잘 모르겠어요-_-;;;

혹시 관심있으신 고수님들 예제 해설좀 부탁드려도 될까요. 아울러 다른 브라우져에서도 저 효과를 내려면 어떤식으로 가능할지 해법을 주시옵소서(__)

감사합니다^^/

http://www.pandora.tv/

여기 참고하시면 메인 상단에 보이실겁니다.
상단에 이슈동영상 부분 썸네일위에 나오는 제목은 알파값이 상속된거구요

아래 실시간랭킹쪽에있는 썸네일위에있는 검정바 윗부분에나오는 순위텍스트와 순위아이콘은 상속되지않았습니다.
간단합니다.

님이쓰신 "의미없는 다른 div를 만들어서 z-index로 깔아버리는...거까지는 이해를 했어요. "
이해하셧다고했는데 아직 잘 이해못하신듯,.^^

알파값이 상속된것과 상속되지않는것의 차이는 아래 예로 간단히 설명드리겠습니다.

상속되지않은것 (아래소스보시면 절대좌표를가진 두개의div 가 독립적으로 위치합니다. )
<style type="text/css">
.ranking_bg {
position:absolute;
top:65px;
left:0;
z-index:100;
opacity:.70;
filter:alpha(opacity=70);
background:#000;
width:113px;
height:20px;
}

.ranking_text {
position:absolute;
top:66px;
left:0;
z-index:200;
width:110px;
color:#fff;
}
</style>

<body>
<div class="ranking_text">내용</div>
<div class="ranking_bg"></div>
</body>

=============================================================================

상속된것 (아래소스보시면 절대좌표를가진 div안에 상속되어 위치합니다. )
<style type="text/css">
.ranking_bg {
position:absolute;
top:65px;
left:0;
z-index:100;
opacity:.70;
filter:alpha(opacity=70);
background:#000;
width:113px;
height:20px;padding:5px;
color:#fff;
}
</style>

<body>
<div class="ranking_bg">내용</div>
</body>

이렇게됩니다.
그리고 익스플로러용 알파값필터는 filter:alpha(opacity=70);
파이어폭스용 알파값필터는 opacity:.70;

이렇게 사용해주시면 됩니다.
저는 위에 처럼 두개 갑이 사용했습니다 . ^^
이해가 되셨나요?

전 개발자두 아니구 아직은 퍼블리셔두 아닌데 웹디를 오래하다가 보니 터득이..^^

Mozilla 한국 커뮤니티

알파값이 상속되지않게 하는 방법중에서...

알파값이 상속되지않게 하는 방법중에서...

Re: 알파값이 상속되지않게 하는 방법중에서...