不透明度在瀏覽器中變得透明

我剛剛再次遇到了不透明問題。我想是這樣的：不透明度在瀏覽器中變得透明

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');

這件事情是工作的罰款與IE8，但一些如何在Chrome，火狐我得到這樣的結果：

截圖：

enter image description here

它完全變得透明，但我不想讓彈出透明。我可以破解這個嗎？

任何幫助，非常感謝。

來源

2013-05-14 Dhaval Marthak

將不透明度應用於不透明度反映在所有子元素上的元素時。這就是爲什麼你的彈出式內容也是透明的。

IE8（http://caniuse.com/#feat=css3-colors）不支持CSS3顏色，否則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>

來源

2013-05-14 11:42:56 Stoffe

不透明度在瀏覽器中變得透明

回答

相關問題