CSS背景拉伸到填满屏幕上的Safari浏览器,但不是在iOS(CSS background str

2019-09-29 06:58发布

这个CSS成功延伸我的背景图片来填充屏幕面积的100%,在Safari上而不是在iOS上不滚动。 我怎么也防止图像滚动iOS上?

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x;
    background-size: auto 100%;
    background-attachment: fixed
}

Answer 1:

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: url(../img/background.jpg) center repeat-x fixed;
}


Answer 2:

我放弃了试图让我的iPhone与CSS发挥很好,而不得不求助于使用jQuery。

在我的网页上,我添加了一个<div>我要填满屏幕:

<body>
    <div class="cssFullScreen" />
    ...etc...

然后我说在CSS的两汤匙...

<style>
    .cssFullScreen
    {
        position: absolute;
        left:0px;
        top:0px;
        background: url(BackgroundImage.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

..和jQuery的的不情愿瓢...

<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
    $().ready(function () {

        ResizeWindows();

        $(window).resize(function () {
            ResizeWindows();
        });
    });

    function ResizeWindows() {
        //  When the user resizes the window, we'll resize any DOM elements
        //  with the "cssFullScreen" class.
        var width = window.innerWidth ? window.innerWidth : $(window).width();
        var height = window.innerHeight ? window.innerHeight : $(window).height();

        $(".cssFullScreen").width(width);
        $(".cssFullScreen").height(height);
    }
</script>

它不漂亮,但它是我唯一能找到的东西真正地在iPhone上工作。

而奇怪的是,当应用于此代码只工作(在iPhone) div 。 如果我试图直接套用到htmlbody ,它什么也没做......



文章来源: CSS background stretches to fill screen on Safari but not on iOS