帶有半透明漸變色的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背景顯示白色背景

回答

相關問題