IOS safari 和 Android 股票浏览器不会在 png 图像中呈现透明像素答案

【问题标题】：IOS safari and Android stock browser don't render transparent pixels in png imageIOS safari 和 Android 股票浏览器不会在 png 图像中呈现透明像素
【发布时间】：2012-11-23 08:05:15
【问题描述】：

我有一个漂亮的半透明绿色花朵背景图像，应该整齐地环绕图像。对于桌面浏览器，它运行良好

但在移动平台股票浏览器上它看起来像（这是从我尝试索引 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;
    }

即使我只是使用<img src="images/greenflowers.png">，它仍然会以白色背景呈现。

有人知道在股票浏览器上正确显示半透明 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);
}

【问题讨论】：

你试过用background-color: none;替换background-color: transparent;吗？
它应该简单地从渐变中继承背景...

标签： android ios browser png transparency

【解决方案1】：

试试这个添加

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

【讨论】：

就像 javascript?ReferenceError: getWindow is not defined; TypeError: Object [object Window] has no method 'getAttributes'

【解决方案2】：

我有一个大脸的时刻。

我已经为此奋斗了两个月，但我根本无法弄清楚其中的逻辑。问题出在 econtainer 元素中，它有一个参数：width:100%。

发生的情况是它只将宽度渲染到视口的实际页面宽度。

因此，如果您在移动设备上有一个 480 像素宽的浏览器屏幕，它会将宽度设置为 480 像素，渲染 480 像素的渐变，并且在您横向滚动时不会重新渲染。

通过添加 min-width:1200px 解决了问题；现在它可以正确渲染了！

感谢大家对此进行调查...

【讨论】：