GWT：Internet Explorer透明度問題

這篇文章只關注IE。以下代碼的最後一行導致該問題。GWT：Internet Explorer透明度問題

int width = 200; 
    int height = 200; 
    int overHeight = 40; 

    AbsolutePanel absPanel = new AbsolutePanel(); 
    absPanel.setSize(width + "px", height + "px");  

    SimplePanel underPanel = new SimplePanel(); 
    underPanel.setWidth(width + "px"); 
    underPanel.setHeight(height + "px"); 
    underPanel.getElement().getStyle().setBackgroundColor("red");   

    SimplePanel overPanel = new SimplePanel(); 
    overPanel.setWidth(width + "px"); 
    overPanel.setHeight(overHeight + "px"); 
    overPanel.getElement().getStyle().setBackgroundColor("black"); 
    //Setting the IE opacity to 20% on the black element in order to obtain the see through effect. 
    overPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=20)"); 

    absPanel.add(underPanel, 0, 0); 
    absPanel.add(overPanel, 0, 0); 

    RootPanel.get("test").add(absPanel); 

    //The next line causes the problem. 
    absPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=100)");

因此，基本上該代碼應該由200像素顯示的200像素紅色正方形（參見underPanel在代碼）和在它的上面通過40像素的200像素黑色矩形（參見overPanel在代碼）。然而，由於黑色矩形的透明度設置爲20％，因此它會部分透明，因此它應該以紅色顯示，但是由於它實際上是褪色的黑色項目，所以會比坐在矩形中的紅色更暗。

由於最後一行代碼將包含AbsolutePanel的不透明度設置爲100％（理論上不應影響視覺效果），因此會出現一些渲染問題。事實上，在這種情況下，躺在上面的面板仍然可以看透，但直通頁面的背景顏色！這就好像坐下的面板根本就沒有...

任何想法？

這是在GWT 2.0和IE7下。

來源

2010-04-20 mks-d

IE7的做法稍有不同。試試這個：

absPanel.getElement().getStyle().setProperty("msFilter", 
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

來源

2011-01-03 00:33:47 chprpipr

翻譯是，它的工作，感謝您的提示和鏈接。 – 2011-04-02 19:08:22

你也可以包括院長愛德華茲IE9.js（http://code.google.com/p/ie7-js/），它可以讓你使用不透明度屬性你的css類（還有更酷的東西，比如使用僞選擇器！）。我已經成功地在幾個基於GWT的項目中使用它。此外，我會設置一個CSS類（setStyleName（）），而不是設置UI元素的內聯樣式。

來源

2011-01-22 12:50:28 tapmonkey

只是爲了完整起見......最新GWT 2.4有方法：

Style.setOpacity()

這是正確正在對所有當前的瀏覽器平臺（包括IE6，IE7，IE8）

來源

2011-12-17 04:09:57

GWT：Internet Explorer透明度問題

回答

相關問題