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上的背景大小

回答

相关问题