在渐变上半透明透明的 png 的 CSS 背景显示为白色背景答案

【问题标题】：CSS background of png with semitransparancies transparant on a gradient shows a white background在渐变上半透明透明的 png 的 CSS 背景显示为白色背景
【发布时间】：2012-07-04 12:35:13
【问题描述】：

如果您使用 android 浏览器查看此小提琴 (http://jsfiddle.net/5ajYD/)，您会发现构成花朵的 PNG 具有白色背景。

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

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

有人知道在安卓浏览器上解决这个问题的方法吗？由于不同浏览器的渐变差异，我无法使用非透明背景。

到目前为止我所尝试的：

我已经尝试过使用“多个”背景，两者都定位在 location 0px 0px，但这不起作用
我已经尝试为带有花朵的 div 添加渐变，但是也失败并在其他浏览器中崩溃。

我觉得这种问题出现在现代浏览器上非常令人费解......即使是诺基亚 n95 也能正确解决......

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

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

http://t.co/mofPkqjf

【问题讨论】：

我不确定其他人，但即使使用 FF 或 Chrome，我也没有看到在你的小提琴中加载图像（看看它应该是什么样子）。
您的小提琴上没有加载鲜花的图像。有一个框，看起来像是试图加载的图像。
和这些家伙在一起。尝试浏览有问题的图像时收到 403 Forbidden 响应。请让它们公开访问或找到另一个地方来托管它们。 elsediendegroot.nl/wp-content/themes/twentyeleven/images/…
我很抱歉。它仍然是一个正在开发的网站。我已经更新了允许图像通过的权限。你应该能看到小提琴。
您是否尝试过以不同于 Fireworks 或类似程序的方式导出 png？也许Android浏览器在处理png时更喜欢某些选项...

标签： css png background-image linear-gradients png-24

【解决方案1】：

我有一个大脸的时刻。

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

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

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

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

感谢大家对此进行调查...

【讨论】：

【解决方案2】：

使用 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:

【讨论】：