如果你用Android浏览器查看这个小提琴(http://jsfiddle.net/5ajYD/),你会看到构成花朵的PNG有白色背景。
在所有其他浏览器上,它显示完全正常,除了Android浏览器。 我已经用Google搜索了这个问题,但我唯一能找到的就是png绑定问题并且与Android应用程序编程有关。
这让我想起了MSIE 6对透明图像的问题,我发现这种情况很奇怪。
有没有人知道在Android浏览器上修复此问题? 由于不同浏览器的梯度差异,我无法使用非透明背景。
到目前为止我尝试过:
我觉得这种问题出现在现代浏览器上非常神秘......即使是诺基亚n95也是如此......
我正在测试的Android版本/发现这个是android 2.3.4(索尼爱立信Xperia Arc S LT18i)
这就是我在手机上的Android浏览器中看到的小提琴
答案 0 :(得分:0)
使用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 < 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:
答案 1 :(得分:0)
我有一个很大的面孔。
我已经和我争斗了两个月了,我根本无法找出逻辑。问题是在econtainer元素中它有一个参数:width:100%。
它只会将宽度渲染到视口的实际页面宽度。
因此,如果移动设备上的浏览器屏幕宽度为480px,则将宽度设置为480px,渲染480px的渐变,而不是在向侧面滚动时重新渲染。
通过添加最小宽度:1200px来解决问题;现在它渲染得恰到好处!
谢谢大家调查......