Question

我在制作网站的移动版本时遇到问题。当网站在Android手机上正常运行时， PNG 图片未显示在iPhone上。

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

这个PNG的重量是〜180kb，它已经是透明的，但我用CSS再次修改了它的不透明度。

我尝试了很多方法，但似乎都没有。

Here是移动网站的网址。 here是PNG图片的网址。

这是我的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);
}

希望这有帮助！

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

PNG图像未在iPhone上显示

1 个答案: