Firefox不透明問題：如果容器不透明度<1.0

在Chrome或Safari中不會發生這種情況，文字會變得很奇怪，並會出現彩色輪廓。在IE8中有點顯着，但非常輕微（和灰色）。我在兩臺顯示器上看到的輪廓都是綠色的。我不知道這是我的圖形卡的問題，還是Firefox在不同的透明度下渲染字體的問題。Firefox不透明問題：如果容器不透明度<1.0

這種情況是否靜態設置CSS，不使用jQuery fadeTo()效果。

以下測試頁顯示問題。將鼠標從左上角移到右下角以更改不透明度。最終你會達到1.0的不透明度，此時一切都很好。任何想法，爲什麼這可能是？

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> 
     Text Opacity Test 
     </title> 
     <style type="text/css"> 
      body { 
       background-color: #ddd; 
      } 
      div#textDiv { 
       position: absolute; 
       left: 0; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       padding: 20px; 
       font-size: 400%; 
       color: white; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(document).bind('mousemove',function(e){ 
        var hOpacity = (e.pageX/Math.round($('#textDiv').width())/2); 
        var vOpacity = (e.pageY/Math.round($('#textDiv').height())/2); 
        var opacity = vOpacity + hOpacity; 
        opacity = (opacity > 1) ? 1.0 : (opacity < 0) ? 0 : opacity; 
        $("#textDiv").text('Opacity: ' + opacity.toFixed(2)); 
        $('#textDiv').fadeTo(0, opacity); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="textDiv"></div> 
    </body> 
    </html>

來源

2010-10-27 Robusto

這裏沒有問題，Firefox 3.6.3/Mac OS X 10.4.11 – drudge 2010-10-27 20:16:46

由於未完全優化亞像素抗鋸齒，我注意到我的角色周圍有*非常*輕微的邊框; FF 3.6.11/Linux。你使用哪種操作系統？ – 2010-10-27 20:20:30

@jncpl＆@Marcel Korpel：此框運行Windows 7.感謝您的測試。 – Robusto 2010-10-27 20:23:18

事實上，FF中的文本和不透明度存在問題。您只需要爲要更改不透明度的元素設置背景顏色。

如果你不能（如：文字上的各種背景）嗯......你擰：d

說不上來，如果它的工作，但你可以設置background-color: rgba(0,0,0,0)，也許你是幸運的。

來源

2010-10-27 20:29:10

布拉沃。在'＃textDiv'上設置背景色可以解決問題。謝謝。但是你是對的，這在我無法在容器上使用背景色的情況下會出現問題。 – Robusto 2010-10-27 20:35:32

感謝這個Ionut。這個問題也幫助我！ – Cheeky 2011-03-21 11:40:02

Firefox不透明問題：如果容器不透明度<1.0

回答

相關問題