我目前正在使用CSS作为我的单页网站的全屏背景(由几个高度为1300px的div组成)。它工作得很好,背景图像在页面可见部分全屏显示,但在ipad上不起作用。backstretch的问题是,如果我包含以下代码
<script>
$("#medias").backstretch("../images/bg-18.jpg");
在我的"medias"DIV中,背景图像覆盖了我的DIV的全部尺寸(所以1300高度*宽度),这不是我想要它覆盖的浏览器窗口
带CSS方法的DIV示例:
#medias {
height: 1300px;
background: #8aba56;
padding-top: 150px;
background: url(../images/bg-18.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
}
我最初使用backstretch,因为css在ipad上似乎不起作用。正如你所描述的。然而,奇怪的是,在尝试了CSS之后,并修改了这个:
背景图片:url (background.jpg);
background-image: url ('www.imgur.com/background.jpg')背景在iPad上工作。似乎把背景图片的位置改为直接url, iPad就能生成图片。所以,试着把你的图片上传到一个临时服务器上(比如imgur),然后把CSS中的链接改成imgur链接。
奇怪的是,它对我有效。