IOS safari和Android股票浏览器don';在png图像中渲染透明像素

IOS safari和Android股票浏览器don';在png图像中渲染透明像素,android,ios,browser,png,transparency,Android,Ios,Browser,Png,Transparency,我有一个漂亮的半透明背景图像,绿色的花朵应该整齐地环绕在图像周围。 对于桌面浏览器,它工作得很好 但在移动平台股票浏览器上,它看起来像(这是我尝试索引PNG时的结果,但使用完整的24位PNG它呈现相同的效果(除了使用相同的平滑白花) 我在这方面使用的CSS代码是: body div.econtainer div.makeitnice div.flowers { position:absolute; top:0px; right:30px; backg

我有一个漂亮的半透明背景图像,绿色的花朵应该整齐地环绕在图像周围。 对于桌面浏览器,它工作得很好

但在移动平台股票浏览器上,它看起来像(这是我尝试索引PNG时的结果,但使用完整的24位PNG它呈现相同的效果(除了使用相同的平滑白花)

我在这方面使用的CSS代码是:

body div.econtainer div.makeitnice div.flowers 
    {
    position:absolute;
    top:0px;
    right:30px;
    background:none;
    background-color: transparent;
    background-image: url(images/greenflowers.png);
    width:790px;
    height:200px;
    }
即使我只是简单地使用
,它仍然以白色背景渲染

有人知道在股票浏览器上正确显示半透明PNG的解决方案吗

这是我尝试使用的透明png:

我试图在这个背景上使用它:

border-bottom-style:solid;
border-bottom-color:#fff;
border-bottom-width:1px;
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
margin-top:30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE3OCwyMDEsMCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDEzMywxNTEsMCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
background-image: linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -o-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -moz-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -ms-linear-gradient(bottom, #859700 0%, #B2C900 40%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.0, #859700),
    color-stop(0.4, #B2C900)
);

padding:0px;
overflow:visible;
-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.20);
-moz-box-shadow:    0px 4px 5px rgba(50, 50, 50, 0.20);
box-shadow:         0px 4px 5px rgba(50, 50, 50, 0.20);
}
尝试添加此选项

getWindow().getAttributes().format = android.graphics.PixelFormat.RGBA_8888;

我有一个巨大的手掌瞬间

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

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

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

通过添加最小宽度1200px解决了这个问题;现在它可以正确渲染了


感谢大家关注这一点……

您是否尝试过将
背景色:透明;
替换为
背景色:无;
?它应该简单地从渐变中继承背景…就像javascript一样?引用错误:未定义getWindow;类型错误:Object[Object Window]没有方法“getAttributes”