logo标签列表

CSS背景中使用半透明PNG图片并置于渐变色之上，显示为白色背景。

csspngbackground-imagelinear-gradientspng-24
4
如果您使用安卓浏览器查看此fiddle(http://jsfiddle.net/5ajYD/)，您会发现组成花朵的PNG图片有白色背景。在所有其他浏览器中，它显示得很正常，除了安卓浏览器。我已经在谷歌上搜索过这个问题，但我能找到的唯一一件事是与png带状和相关的安卓应用程序编程问题。这让我想起了MSIE 6对透明图像的问题，我觉得这很奇怪。有人知道如何解决安卓浏览器上的这个问题吗？我不能使用非透明背景，因为不同浏览器之间存在渐变差异。我已经尝试过以下方法：我已经尝试过同时在位置0px 0px处使用“多个”背景，但那行不通；我已经尝试向带有花朵的div添加渐变，但那也失败了并在其他浏览器中出现问题。我觉得这种问题出现在现代浏览器上非常神秘...即使是诺基亚n95也能做得很好...

我正在测试/发现的Android版本是Android 2.3.4（Sony Ericsson Xperia Arc S LT18i）

这是我在手机上使用Android浏览器看到的fiddle内容。

http://t.co/mofPkqjf

1
我不确定其他人是否有同样的问题，但是即使使用FF或Chrome（为了看它应该是什么样子），我也没有看到图像加载在你的fiddle中。 - ScottS
和这些人在一起，当尝试浏览相关图片时，会收到403禁止访问的响应。请将它们设为公共可访问或找到另一个托管它们的地方。http://www.elsediendegroot.nl/wp-content/themes/twentyeleven/images/greenflowers.png - MusikAnimal
抱歉，这个网站还在开发中。我已经更新了权限，让图片通过了。你应该能够看到这个fiddle。 - Tschallacka
你尝试过从Fireworks或类似程序中以不同的方式导出PNG文件吗？也许Android浏览器在处理PNG文件时喜欢某些选项而不是其他选项... - Krimo
你尝试过将文件导出为8位PNG而不是24位PNG吗？它可能看起来不太好，但应该可以工作。或者，您可以将文件保存为透明的GIF，并将透明颜色设置为白色。 - Billy Moat
显示剩余9条评论
2个回答
1

我真是太蠢了。

我已经和这个问题斗争了两个月，但我根本无法理解它的逻辑。问题出在econtainer元素上，它有一个参数：width:100%。

问题在于它只呈现视口实际页面宽度的宽度。

因此，如果您在移动设备上使用浏览器屏幕，宽度为480px，它将设置宽度为480px，呈现480px的渐变，并且在您横向滚动时不会重新呈现。

通过添加min-width:1200px;来解决问题，现在它可以正确地呈现！

感谢大家的关注...

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:
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接