CSS背景在Safari上可以拉伸以填充屏幕，但在iOS上不行

vql8enpb 于 2023-03-31 发布在 iOS

关注(0)|答案(3)|浏览(155)

这个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
}

ios

来源：https://stackoverflow.com/questions/22701235/css-background-stretches-to-fill-screen-on-safari-but-not-on-ios

3条答案

按热度按时间

csga3l581#

我放弃了让我的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上工作的东西。
而且奇怪的是，这段代码只在应用于div时（在iPhone上）有效，如果我试图将其直接应用于html或body，它什么也没做...

赞(0）回复(0）举报 2023-03-31

e37o9pze2#

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

赞(0）回复(0）举报 2023-03-31

mwkjh3gx3#

我遇到了这个问题，它与position: fixed相关。以下是我的解决方法。
把背景从身体上取下来，放在它自己的类中。

.bg-pulsing-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: linear-gradient(58deg, #ffffff, #ffffff, #ffffff, #FAF4CF, #F5EA9F, #ffffff);
  background-position: bottom left;
  background-size: 200% 150%;
  animation: pulsingGradient 15s ease infinite;
  background-repeat: no-repeat;
  z-index: -1000; // send to back
}
@keyframes pulsingGradient {
  0% {
    background-size: 200% 150%;
  }
  50% {
    background-size: 150% 150%;
  }
  100% {
    background-size: 200% 150%;
  }
}

在<body>标记之后，将bg类添加到单个div中。

...
<body>
  <div class="bg-pulsing-gradient"></div>
...
</body>

position: fixed沿着width，height，top，left会在你所有的内容后面创建一个粘性框，css的背景会留在这个框里。
这适用于iOS和桌面。

赞(0）回复(0）举报 2023-03-31

我来回答

CSS背景在Safari上可以拉伸以填充屏幕，但在iOS上不行

3条答案

相关问题

热门标签

最新问答