4

如果您使用 android 浏览器查看这个小提琴（http://jsfiddle.net/5ajYD/），您会看到构成花朵的 PNG 具有白色背景。

在所有其他浏览器上，它显示完全正常，除了 android 浏览器。我已经用谷歌搜索了这个问题，但我唯一能找到的是 png 条带问题，并且与 android 应用程序编程有关。

这让我想起了 MSIE 6 对透明图像的问题，我觉得很奇怪这种情况发生了。

有谁知道在 android 浏览器上解决此问题的方法？由于不同浏览器的渐变差异，我不能使用非透明背景。

到目前为止我已经尝试过：

  • 我已经尝试过使用位于 0px 0px 位置的“多个”背景，但这不起作用
  • 我尝试用鲜花向 div 添加渐变，但这也失败了，并且在其他浏览器中中断了。

我发现这种问题出现在现代浏览器上非常令人费解......即使是诺基亚 n95 也能做到......

我正在测试/发现的 android 版本是 android 2.3.4(Sony Ericsson Xperia Arc S LT18i)

这就是我在手机上的 android 浏览器中看到的小提琴

http://t.co/mofPkqjf

4

2 回答 2

1

使用 HTML5 Canvas 创建一个alphaJPEG，一个分层在具有 alpha 通道的等效 PNG 下的 JPEG。

<head>
  <style>img[data-alpha-src]{visibility: hidden;}</style>
</head>
<body>
  <img src="image.jpg" data-alpha-src="alpha.png" />
  <!--...-->
  <script src="ajpeg.js"></script>
</body>

ajpeg.js

(function() {

  var create_alpha_jpeg = function(img) {

    var alpha_path = img.getAttribute('data-alpha-src')
    if(!alpha_path) return

    // Hide the original un-alpha'd
    img.style.visiblity = 'hidden'

    // Preload the un-alpha'd image
    var image = document.createElement('img')
    image.src = img.src
    image.onload = function () {

      // Then preload alpha mask
      var alpha = document.createElement('img')
      alpha.src = alpha_path
      alpha.onload = function () {

        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        img.parentNode.replaceChild(canvas, img)

        // For IE7/8
        if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas)

        // Canvas compositing code
        var context = canvas.getContext('2d')
        context.clearRect(0, 0, image.width, image.height)
        context.drawImage(image, 0, 0, image.width, image.height)
        context.globalCompositeOperation = 'xor'
        context.drawImage(alpha, 0, 0, image.width, image.height)

      }
    }
  }

  // Apply this technique to every image on the page once DOM is ready
  // (I just placed it at the bottom of the page for brevity)
  var imgs = document.getElementsByTagName('img')
  for(var i = 0; i &lt; imgs.length; i++)
    create_alpha_jpeg(imgs[i])

})();

In the head element I linked to FlashCanvas:

<!--[if lte IE 8]><script src="flashcanvas.js"></script><![endif]-->

... and I threw in this to avoid a flicker of the un-alpha’d JPEG:
于 2012-07-11T18:13:58.573 回答
1

我有一个很大的面部表情时刻。

我已经为此奋斗了两个月，我根本无法弄清楚其中的逻辑。问题出在 econtainer 元素中，它有一个参数：width:100%。

发生的情况是它只将宽度渲染到视口的实际页面宽度。

因此，如果您在移动设备上有一个 480 像素宽的浏览器屏幕，它会将宽度设置为 480 像素，渲染 480 像素的渐变，并且在您横向滚动时不会重新渲染。

通过添加 min-width:1200px 解决了这个问题；现在它可以正确渲染了！

谢谢大家关注这个...

于 2012-12-05T13:49:17.513 回答