Question

在移动设备上，当身体设置为（位置：固定）时，我的背景图像看起来像这样。

当身体设置为（位置：相对）时，这就是背景图像的样子。

你可以看出，当身体被设置为（位置：固定）时，它往往比另一个更加缩小，我不确定为什么会出现这个问题。问题只发生在移动设备上。它应该看起来像第二个看起来正确的图像，但它比第二个图像缩小得多。以下是此主要代码：

HTML

<body>
 <div class="background">
  <div class="hero">
  </div>
 </div>
</body>

的CSS：

 body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:fixed;
  background-color:#fff;
  font-family: 'Open Sans', sans-serif;
 }

 /* Background Space */

 .background {
  margin:0;
  padding:0;
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
 }

 /* Background Image */

 .hero {
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  background-image: url('../images/background.jpg');
  background-repeat:no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment:fixed;
  background-position:50% 50%;
  width:100%;
  height:100vh;
 }

提前感谢您的帮助！

Answer 1

尝试从这个新代码开始，然后开始摆弄。让我知道你想出了什么。你使用它作为属性的很多东西甚至在你使用它的情况下都不做任何事情。例如，为具有相对位置的元素设置顶部，左侧，底部和右侧，不执行任何操作。你可能希望将这些属性用于绝对位置的东西。

你可以得到一个全高度的背景图像，而且更少的verbage。首先尝试下面的代码段。

＆＃13;

html,body {
  margin: 0;
  height: 100%;
}

#hero {
  background: url('../img/hero.jpg') center center / cover no-repeat;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: -10;
}

#overlay {
  background: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 50;
}

＆＃13;

Answer 2

尝试使用@media查询

@media screen and (max-width: 770px) {
     .hero {
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  background-image: url('http://i.stack.imgur.com/OMCdB.png');
  background-repeat:no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment:fixed;
  width:100%;
  height:100vh;
 }

注意：更改窗口调整大小，我希望您接受的输出存在。在现场演示中。 移动设备中的最大宽度设置背景。

直播 Demo

背景图像调整大小问题

2 个答案: