渐变上带有半透明度transparant的png CSS背景显示白色背景_Css_Png_Background Image_Linear Gradients_Png 24

渐变上带有半透明度transparant的png CSS背景显示白色背景

css

渐变上带有半透明度transparant的png CSS背景显示白色背景,css,png,background-image,linear-gradients,png-24,Css,Png,Background Image,Linear Gradients,Png 24,如果你用android浏览器查看这个fiddle（），你会发现组成花的PNG有一个白色背景在所有其他浏览器上，除了android浏览器之外，它显示出完全正常。我在谷歌上搜索过这个问题，但我能找到的唯一问题是png带和android应用程序编程这让我想起了MSIE 6在透明图像方面存在的问题，我发现这种情况非常奇怪有人知道android浏览器上这个问题的解决方案吗？我不能使用非透明背景，因为不同浏览器的梯度不同到目前为止，我所尝试的：我已经尝试过使用“多个”背景，这两种背景都是存在

如果你用android浏览器查看这个fiddle（），你会发现组成花的PNG有一个白色背景

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

这让我想起了MSIE 6在透明图像方面存在的问题，我发现这种情况非常奇怪

有人知道android浏览器上这个问题的解决方案吗？我不能使用非透明背景，因为不同浏览器的梯度不同

到目前为止，我所尝试的：

我已经尝试过使用“多个”背景，这两种背景都是存在的位置0px 0px，但这不起作用
我试着给有花的div加一个渐变，但是也失败，并在其他浏览器中中断

我发现这类问题出现在现代浏览器上非常令人迷惑。。。即使是诺基亚n95也能做到这一点

我测试的android版本是android 2.3.4（索尼爱立信Xperia Arc S LT18i）

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

使用HTML5画布创建一个JPEG，该JPEG在具有alpha通道的等效PNG下分层

<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>


img[data alpha src]{可见性：隐藏；}

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:

（函数（）{
var create_alpha_jpeg=函数（img）{
var alpha_path=img.getAttribute（'data-alpha-src'）
如果（！alpha_path）返回
//隐藏原始的非alpha文件
img.style.visiblity='hidden'
//预加载未加载alpha的图像
var image=document.createElement（'img'）
image.src=img.src
image.onload=函数（）{
//然后预加载alpha掩码
var alpha=document.createElement（'img'）
alpha.src=alpha_路径
alpha.onload=函数（）{
var canvas=document.createElement（'canvas'）
canvas.width=image.width
canvas.height=image.height
img.parentNode.replaceChild（画布，img）
//对于IE7/8
if（typeof FlashCanvas！=“未定义”）FlashCanvas.initElement（画布）
//画布合成代码
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）
}
}
}
//DOM就绪后，将此技术应用于页面上的每个图像
//（为了简洁起见，我把它放在了页面底部）
var imgs=document.getElementsByTagName（'img'）
对于（变量i=0；i imgs.length；i++）
创建\u alpha\u jpeg（imgs[i]）
})();
在链接到FlashCanvas的head元素中：
... 我加入了这个，以避免出现未经alpha处理的JPEG的闪烁：

我有一个非常开心的时刻

我已经为此奋斗了两个月了，我简直搞不懂其中的逻辑。问题在于EconContainer元素中有一个参数：width:100%

所发生的情况是，它仅渲染最大为视口实际页面宽度的宽度

所以，如果你在手机上有一个480px宽的浏览器屏幕，它会将宽度设置为480px，渲染一个480px的渐变，当你横向滚动时不会重新渲染

通过添加最小宽度（1200px）解决了该问题；现在它可以正常渲染了

感谢大家关注这一点……

我不确定是否还有其他人，但我看不到你的小提琴上加载的图像，即使是使用FF或Chrome（看看它应该是什么样子）。你的小提琴上没有加载花朵的图像。有一个盒子，看起来像是一个试图加载的图像。尝试浏览相关图像时，收到403禁止响应。请让他们公开访问或找到另一个地方接待他们。我道歉。它仍在开发中。我已经更新了允许图像通过的权限。您应该能够看到小提琴。您是否尝试过将png导出为与焰火或类似程序不同的格式？也许Android浏览器在处理PNG时喜欢某些选项而不是其他选项。。。