Question

我正在为移动网站制作媒体查询，我正在尝试将背景设置为图像：

body {
background: url("../images/back1.jpg") no-repeat center center fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

这不适用于手机。据我所知，我不能使用固定的移动浏览器。我怀疑有什么其他方法可以制作背景图像而不会拉伸太多或使其模糊。谢谢你你的时间

Answer 1

尝试为身体添加子容器。

＆＃13;

    body {
      position: relative;
      min-height: 700px;
      }
      body div {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: url("https://placehold.it/480x720") no-repeat center center;
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

＆＃13;

<body>
  <div>

  </div>
</body>

＆＃13;

注意：这可能是获得结果的低效方式。添加太多DOM元素将增加浏览器的计算量。

Answer 2

听起来核心问题是你没有这个元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

这将启用＆＃34;响应能力＆＃34;在移动浏览器中。

为移动浏览器设置全尺寸背景图片的其他方法

2 个答案: