jquery - iOS 设备上不显示透明的 PNG div

Question

我目前有一个 HTML 页面，上面有一个 PNG 图像，上面有说明。单击/触摸页面时，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;
}

J查询:

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

Answer 1

我在一个网站上遇到过类似的情况，图像文件会被压缩成尺寸但分辨率很高。所以你最终得到一个 300x425 像素的盒子，只有黑色或透明，因为图像没有被缩放。

这里有一些可能的修复。 iOS 不喜欢 css 的速记符号，所以使用

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

如果问题与我遇到的相同，您可以添加缩放，这通常可以解决问题。

#overlay img{
zoom = 1;
}

在 iOS 上呈现的文件也有 3mp 或 3000x1000 分辨率限制。因此，请确保您的图片对于 iOS 而言不会太大。

希望对您有所帮助。