反向拉伸和背景尺寸:封面



我目前正在使用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链接。

奇怪的是,它对我有效。

最新更新