CSS фон PNG с полупрозрачностью прозрачный на градиенте показывает белый фон

Если вы посмотрите на эту скрипку ( http://jsfiddle.net/5ajYD/) с помощью браузера Android, вы увидите, что PNG, составляющий цветы, имеет белый фон.

На всех других браузерах это показывает совершенно нормально, кроме браузера Android. Я погуглил эту проблему, но единственное, что я могу найти, это проблема с png-бандингом, связанная с программированием приложений для Android.

Это напоминает мне о проблемах MSIE 6 с прозрачными изображениями, и я нахожу очень странным, что это происходит.

Кто-нибудь знает решение этой проблемы в браузерах Android? Я не могу использовать непрозрачный фон из-за различий градиента в разных браузерах.

Что я уже пробовал:

  • Я уже пытался использовать "несколько" фонов, оба расположены в 0px 0px, но это не работает
  • Я пытался добавить градиент к div с цветами, но это тоже не удалось и сломалось в других браузерах.

Я нахожу очень загадочным, что такого рода проблемы появляются в современном браузере... даже Nokia N95 понимает это правильно....

Версия Android, с которой я тестирую / нашла это, - Android 2.3.4(Sony Ericsson Xperia Arc S LT18i)

Это то, что я вижу с помощью скрипки в браузере Android на телефоне

http://t.co/mofPkqjf

Источник

2 ответа

Решение

У меня был большой лицевой момент.

Я борюсь с этим уже два месяца и просто не могу понять логику. Проблема была в элементе econtainer, который имел параметр: width:100%.

Что происходит, так это то, что он отображает ширину только до фактической ширины страницы в окне просмотра.

Поэтому, если у вас есть экран браузера на мобильном телефоне шириной 480px, он установит ширину 480px, отобразит градиент 480px и не будет отображаться при прокрутке в сторону.

Проблема была решена путем добавления минимальной ширины:1200px; и теперь он рендерится правильно!

Спасибо всем за внимание к этому...

Источник

Используйте HTML5 Canvas для создания alphaJPEG, JPEG- слоя с эквивалентным 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>

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:
Источник
Другие вопросы по тегам