Question

我早上花了很多时间研究以下问题。我正在制作一个单页网站，使用大量图片。我知道Safari以其背景附件的奇怪处理而闻名：固定，但这工作正常;我的问题是background-size:cover无法与fixed一起使用。

我有5个页面，所有页面的height或min-height都是100％。最后一页修复如下：

#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

使用position:fixed的另一个div来修复背景。

像这样： 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%;
  }
}

希望得到这个帮助。

Answer 2

简短的回答：您暂时无法执行。

您可以使用@media screen and (max-width: 1024px) {}进行游戏，但是现在iPad Pro的分辨率比普通显示器要高。

我为您提供了通过以下方式禁用手机固定附件的功能：

主要CSS文件：

.parallax {
   background-attachment: fixed;
   background-size: cover;
}

主要HTML

<script type="text/javascript">
   if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
      document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
   }
</script>

其他 fixparallax.css

.parallax {
   background-attachment: scroll !important;
}

iOS上的背景大小

2 个答案: