Question

我目前有一个带有PNG图像的HTML页面，上面有指令。单击/触摸页面时，PNG消失，这就是我想要的。然而它的PNG图像引起了我的问题，因为它在safari中显示很好但在iOS设备上没有。如果有人能帮助我，我将非常感激。

HTML：

<div id="overlay">
 <img src="instructions V6.png" width="300" height="425" />
</div>

CSS：

#overlay {
background: rgba(0, 0, 0, .4);
position:absolute;
z-index: 1;
}

Jquery的：

$(document).ready(function() {
    var overlay = $('#overlay');
    overlay.on('click', function (e) {
        overlay
            .hide()
            .off();
    });
});

Answer 1

我在网站上遇到过类似的情况，图像文件会被压缩到维度但是处于全分辨率。所以你最终得到一个300x425px的盒子，只有黑色或透明度，因为图像没有被缩放。

以下是一些可能的修复方法。 iOS不喜欢css的简写符号，所以请使用

background-color: rgba(0, 0, 0, 0.4);

如果是和我一样的问题，你可以添加缩放，这通常可以解决问题。

#overlay img{
zoom = 1;
}

此外，iOS上的文件渲染限制为3mp或3000x1000分辨率。因此，请确保您的图片对于iOS来说不是太大。

希望能帮到你。

透明的PNG div不会在iOS设备上显示

1 个答案: