1

关于 ios (iPad/iPhone) 上的 Safari 中的背景图像，我有几个问题。在常规浏览器上一切正常。图像应该是固定的并填满屏幕。

  1. 在 ios-safari 上显示背景图像并固定在后面。然而，图像的高度是由内容高度以某种方式设置的。这意味着当我在页面上的内容很少时，图像可以正确显示，但是当我的内容很长时，我只能看到背景图像的顶部（图像被拉伸但保持正确的比例）。
  2. 用于切换背景图像的 js 代码在 ios-safari 上没有任何作用。

这是我的html

<html>

<head>
    Some head stuff
</head>

<body>

    <div class="pagewrap">

        <header class="header">
            <div class="menu">
                Some header stuff
            </div>
        </header>

            <div class="full-page-background fullheight"></div>

        <div class="wrap">

            <div class="main">
                Some content
            </div>

        </div>

        <aside class="sidebar">
            <nav class="mobnav">
                My mobile nav
            </nav>
        </aside>

    </div>

    <div class="custom-background">
        A placeholder for a custom background image
    </div>

</body>

</html>

这是 .full-page-background 的 css

.full-page-background {
    background: url(/Content/Vixen/img/background02.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    position: fixed;
    width: 100%;
    z-index: 1;
}

这是 .fullheight 的 js，以确保它填充浏览器窗口的高度。

$(document).ready(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

// for the window resize
$(window).resize(function() {
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight);
});

这是 .custom-background 的 js - 如果 div 中有图像（由用户放置在 cms 中），它将切换新图像的默认图像。在桌面上运行良好，但在 ios-safari 上没有任何作用。

$(".background-image").each(function() {  
    imgsrc = this.src;

    $('.full-page-background').css({
        background:'url(' + imgsrc +') no-repeat fixed center center / cover  transparent'
    });
});
4

1 回答 1

1

我在这里找到了这个插件：

http://srobbin.com/jquery-plugins/backstretch/

它似乎适用于所有设备上的全尺寸背景图像（我测试过的就是！）。其中包括 ios 上的 Safari。

于 2013-07-01T12:39:43.727 回答