iOS上的背景尺寸 [英] Background size on iOS

问题描述

我早上在研究以下问题。我在制作一个单页网站，使用大量的图像。我知道Safari因其奇怪的处理背景附件而闻名：固定，但这是工作正常;我的问题是 background-size：cover 不能与固定结合使用。

我有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：

<$> p $ p> ＃div4 {
min-height：100％;
width：100％;
background：url（img / portfoliobg.jpg）;
overflow：auto;
background-size：cover;
}


这个效果很像一个魅力。

因此，当组合 fixed 和 cover 时，浏览器的行为非常奇怪。

解决方案

使用另一个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％; 
} 
} 
  

希望有帮助。

I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.

I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:

#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;
}

On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.

At the same time, page 4 has the following css:

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

and this works like a charm.

So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?

解决方案

Use another div with position:fixed to make the background fixed.

Like this: 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%;
  }
}

Hope this help.

这篇关于iOS上的背景尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！