带有半透明渐变色的png的png背景显示白色背景

如果你用android浏览器看这个小提琴（http://jsfiddle.net/5ajYD/），你会发现组成花朵的PNG具有白色背景。带有半透明渐变色的png的png背景显示白色背景

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

这让我想起了MSIE 6带有透明图像的问题，我发现这很奇怪。

有没有人知道在Android浏览器上解决这个问题？由于不同浏览器中的梯度差异，我无法使用非透明背景。

我迄今为止尝试：

我一直在使用“多重”的背景都在位置0像素0像素posistioned，但好好尝试一下工作已经尝试
我试着加入了渐变到花的div，但失败了，并在其他浏览器中打破。

我觉得很神秘，这种问题上显示出一个现代浏览器......甚至诺基亚N95得到它的权利....

Android版本我测试针对/发现这跟的是Android 2.3.4（索尼爱立信Xperia Arc LT18i的小号）

这是我与小提琴看到在Android浏览器在手机上

http://t.co/mofPkqjf

来源

2012-07-04 Tschallacka

我不知道别人，但我没有看到你的提琴即使FF或Chrome加载图像（看看它应该看起来像）。 – ScottS

在您的小提琴上没有装载鲜花的图像。有一个框看起来像一个图像试图加载。 –

与这些家伙。尝试浏览有问题的图像时获取403禁止回复。请让他们公开访问或找到另一个地方来主办他们。 http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/greenflowers.png – MusikAnimal

我有一个大的捂脸时刻。

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

会发生什么，它只会渲染宽度直到视口的实际页面宽度。

因此，如果您的移动设备上的浏览器屏幕宽度为480像素，则会将宽度设置为480像素，呈现480像素的渐变效果，并且在您向侧面滚动时不会重新渲染。

该问题已通过添加最小宽度：1200px;现在它呈现正常！

谢谢大家寻找到这...

来源

2012-12-05 13:49:17 Tschallacka

使用HTML5画布创建一个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-11 18:13:58

这是一个很好的建议。我会尝试的。 – Tschallacka

对不起，它不是半透明的。 – Tschallacka

带有半透明渐变色的png的png背景显示白色背景

回答

相关问题