html - PNG 图像未在 iPhone 上显示

Question

我在制作网站的移动版本时遇到问题。 PNG 图片在 iPhone 上不显示，而该网站在 Android 手机上运行良好。

该页面仅包含一些 div、背景和文本后面的透明 PNG。

此 PNG 的重量约为 180kb，它已经是透明的，但我正在使用 CSS 再次修改它的不透明度。

我尝试了很多方法，但似乎都不起作用。

Here是移动网站的 URL。和 here是 PNG 图像的 URL。

---

这是我的 HTML 和 CSS 代码:

<div id=photofond><img alt="" src="handm.png" /></div>

#photofond {
opacity: 0.5;
position: absolute;
top: 23%;
z-index: -1;
}

#photofond img {
width: 100%;
}

Answer 1

对于以这种方式定位的图像，您可能应该使用 CSS background-image而不是 HTML <img>标签。看看http://css-tricks.com/perfect-full-page-background-image/ .

这是(非常)基本的用法，但我建议您查看链接:

#element {
    background-image: url(path/to/image.png);
}

希望这对您有所帮助!

编辑:忘了说您可能最好使用照片编辑软件来降低图像的不透明度以获得最佳的跨浏览器支持。