5

我正在尝试创建一个具有整页背景图片的网站。我已经让它在桌面版本上工作，但是当我将它推送到github手机上并在手机上查看它时，背景图像只是顶部的一个长图像。我background-size: cover在我的css. 下面的屏幕截图。我怎样才能让它在移动设备上占据整个空间？谢谢 ：）

桌面版： 桌面版

手机版： 手机版

.background1
 {
 /* Location of the image */
 background-image: url(images/background-photo.jpg);

 /* Image is centered vertically and horizontally at all times */
 background-position: center center;

 /* Image doesn't repeat */
 background-repeat: no-repeat;

 /* Makes the image fixed in the viewpoint so that it doesn't move when 
 the content height is greater than the image height */
 background-attachment: fixed;

 /* This is what makes the background image 
 rescale based on itscontainer's size */
 background-size: cover;

/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}

html如下

<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>

<body id="bodyID" class="background1">
</body>

<script src="javascript.js"></script>
4

2 回答 2

9

问题源于您的<body>元素没有适合您的设备的高度。你可以坚持 a height: 100%on html, body，但我认为更简单的方法是添加以下内容：

body {
  height: 100vh;
}

这会将 body 元素的高度设置为加载时视口高度的 100%。我对此进行了测试，它解决了我的 Android 设备上的问题，并且不会在桌面上破坏它。

旁注：您可以按照Google 的说明使用 Chrome 检查器工具调试您的 Android 设备。

于 2016-04-26T19:14:56.910 回答
0

您是否定义了最小高度或最大高度或高度？也许你可以分享 Html 代码让我检查。对于背景 css，这里有更好用的代码。

background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;
于 2016-04-26T03:18:11.960 回答