CSS背景延伸以填充Safari上的屏幕，但不支持iOS

此CSS成功延伸我的背景圖像以填充屏幕區域的100％，而不是在Safari上滾動，但不在iOS上滾動。我怎樣才能防止圖像在iOS上滾動？CSS背景延伸以填充Safari上的屏幕，但不支持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 
}

來源

2014-03-27 user852974

我相信你的問題在這裏討論>> http://stackoverflow.com/questions/9779195/does-a-background-attachment -of-fixed-work-in-ios5 – SULTAN

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

來源

2014-03-27 23:52:36 Eligreen

你能提供一個解釋嗎？目前你的答案是不完整的。 – bjb568

將固定屬性放置在背景中的同一行上，也可以添加另一個參數，例如圖像頂部從位置0開始，例如背景：url（../ img/background.jpg）center top repeat-x fixed;因爲參數中心是X Plane的第一個參數 – Eligreen

它應該在答案中。 – bjb568

我放棄了試圖讓我的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，它什麼都沒做...

來源

2017-07-10 10:12:17

CSS背景延伸以填充Safari上的屏幕，但不支持iOS

回答

相關問題