Question

我正在设计一个带有固定壁纸的响应式网站，下面是我的.CSS代码：

body {
  background: url(/path...) no-repeat fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover
}
/* Custom, iPhone Retina- Personal comment: mobile portrait */

@media only screen and (min-width: 320px) {
  body {
    background: url(images/mobile_dark_bg0.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Extra Small Devices, Phones- Personal comment: mobile landscape */

@media only screen and (min-width: 480px) {
  body {
    background: url(images/mobile_dark_bg1.jpg) no-repeat fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
  }
  h1 {
    font-size: 40px
  }
  h2 {
    font-size: 25px
  }
  h3 {
    font-size: 22px
  }
  p {
    font-size: 20px
  }
  .p2, .p3 {
    font-size: 18px
  }
}
/* Medium Devices, Desktops */

@media only screen and (min-width: 1200px) {
  body {
    background: url(images/bg_img.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%
  }
}

请注意，我正在“更改原始正文背景，并在媒体查询中添加另一个背景，以实现页面的响应背景”。

但背景总是搞砸了，要么放大了，要么底部有一个白色的间隙;它适用于小型和超小型，但屏幕越大，它就越搞乱。

我做错了什么？

Answer 1

如果您的背景底部有白色间隙，请尝试：

html, body {
    height: 100vh;
}

100vh将允许页面成为设备的高度，而不是容器高度的100%。

Answer 2

尝试删除no-repeat center center fixed

@media only screen and (min-width: 1200px) {
  body {
    background: url(images/bg_img.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
  }
}

这对我有用。 no-repeat center center fixed让我的图像完全消失。

使用媒体查询来实现响应的身体背景

2 个答案: