불투명도가 브라우저에서 투명 해짐

Question

불투명도 문제가 다시 발생했습니다. 이 점은 IE8과 함께 잘 작동하지만 어떤 방법 크롬, 파이어 폭스에서 나는이 결과를 얻고있다

var hiddenSection = $('div.hidden'); 
hiddenSection.show() 
     .css({ 'display': 'block' }) 
     .css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) 
     .css({ top: ($(window).height() - hiddenSection.height())/2 + 'px',left: ($(window).width() - hiddenSection.width())/2 + 'px'}) 
     .css({ 'background-color': '#333333', 'filter': 'alpha(opacity=70)', 'opacity': '0.7' }) 
     //.css({ 'background-color': 'rgba(105,105,105,0.8)' }) 
     .appendTo('body'); 

:

스크린 샷 :

를 나는 이런 식으로 뭔가를 시도 그것은 완전히 투명하게되지만 투명하게 팝업을 만들고 싶지 않습니다. 내가이 문제를 해결할 수 있습니까?

도움을 주시면 대단히 감사하겠습니다.

Answer 1

불투명도가 모든 자식 요소에 반영되는 요소에 불투명도를 적용 할 때. 그래서 귀하의 팝업 내용도 투명합니다.

CSS3 색상은 IE8 (http://caniuse.com/#feat=css3-colors)에서 지원되지 않습니다. 그렇지 않으면 rgba가이 예제에 적합합니다.

background: rgba(51, 51, 51, 0.7); /* Red, Green, Blue, Alpha */ 

색상 # 333333의 레이어 만 투명해야한다고 생각합니까? 해당 div 외부로 주석 상자를 이동하고 브라우저 창에 가운데에 놓습니다. 이렇게하면 불투명도가 팝업 요소에 적용되지 않습니다. 이 같은

마크 업 일 :

<div class="hidden"> 
    <div class="comment-box">Comment box content</div> 
    <div class="overlay"></div> 
</div>