iOS上的背景大小

Question

我花了一个上午对以下问题进行研究.我正在制作一个单页网站,使用大量图片.我知道Safari以其背景附件的奇怪处理而闻名:固定,但这工作正常; 我的问题是background-size:cover没有与...一起工作fixed.

我有5页,所有页面都有100%height或min-height100%.最后一页修复如下:

#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.有人有解决方案吗？

Answer 1

使用另一个 div 来position:fixed固定背景。

像这样： http: //codepen.io/anon/pen/OVebNg

玉

.fixed
  .bgcover

社会保障体系

.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%;
  }
}

希望这有帮助。