Question

我设法在桌面设备上显示背景图片并做出响应，但是当我在移动设备上查看该网站时，背景图片并未显示。

这是我到目前为止的代码：

#intro{ 
background: url(../img/trees.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale')";
min-height: 100%;
}

Answer 1

将此插入您的头部：

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

更改background-size to 100vh表示高度，100vw表示宽度

Answer 2

body{
  width: 100%;
  height: 100%;
  margin: 0px;
  background: url(../image/background.jpg) no-repeat fixed top center;
  background-size: cover;
}

Answer 3

使用#intro{ background-size:100% 100%;}

如何使背景图像响应并在移动设备上显示

3 个答案: