Question

这不会发生在Chrome或Safari中。它在IE8中有点引人注目，但非常轻微（和灰色）。我在我的显示器上看到的轮廓是绿色的。我不知道这是我的显卡或Firefox在不同的不透明度下渲染字体的问题。

无论样式是静态设置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>

Answer 1

确实，FF中的文字和不透明度存在问题。您只需要为要更改不透明度的元素设置背景颜色。

如果你不能（例如：文字在各种背景下）那么......你被搞砸了：D

Dunno如果有效，但你可以设置background-color: rgba(0,0,0,0)，也许你很幸运。

Firefox不透明度问题：文本变得奇怪，如果容器不透明度＆lt; 1.0

1 个答案: