iOS上的背景大小

我已經花了上午時間研究以下問題。我正在製作一個單頁網站，使用大量圖片。我知道Safari以背景附件的奇怪處理而聞名：固定的，但工作正常;我的問題是background-size:cover不與fixed一起使用。iOS上的背景大小

我有5頁，所有這些頁面都有100％的height或min-height。最後一頁是固定這樣的：

#div5 { 
    height:100%; 
    width:100%; 
    position: relative; 
    background-image: url("img/background.jpg"); 
    background-attachment:fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

在iOS（在Chrome和Safari）的背景圖片進行縮放以覆蓋整個網頁，所以實際上它拉伸。

與此同時，第4頁有如下的CSS：

#div4 { 
    min-height:100%; 
    width:100%; 
    background:url(img/portfoliobg.jpg); 
    overflow: auto; 
    background-size: cover; 
}

，這就像一個魅力。

因此，當合並fixed和cover時，瀏覽器的行爲非常奇怪。有沒有人有解決這個問題？

來源

2014-01-31 Merijn dk

在Windows和Safari上進行測試時，它是否按預期工作？ – BFWebAdmin

是的，它確實是我想要的。在Android上的鉻工作得很好 –

@Merijndk你有什麼版本的iOS的任何信息？ – sidonaldson

使用另一個div與position:fixed使背景固定。

像這樣： http://codepen.io/anon/pen/OVebNg

JADE

.fixed 
    .bgcover

SCSS

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    .bgcover { 
     background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg'); 
     background-size: cover; 
    width: 100%; 
    height: 100%; 
    } 
}

希望這有助於。

來源

2015-08-20 08:22:57 Lydia

iOS上的背景大小

回答

相關問題