Question

我有一个html页面，我想在窗体调整大小时将一个背景图像放在body元素内，该元素适合并伸展。我使用backstretch插件，但它只显示图像的顶部而不是底部。我不知道如何解决这个问题。这里是html页面，然后是css文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content=""/>
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My Page</title>

<link href="img/favicon.ico" rel="icon" type="image/x-icon" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/backstretch.js"></script>

</head>

<body>

<script type="text/javascript">
  $.backstretch("img/bg.jpg");
</script>


</body>
</html>

这里是非常简单的css文件：

body{
    font-family: Helvetica;
    font-style: normal;
    font-size: 90%;
}

路径是正确的，因为它显示图像，即使它只是一部分，顶部，而不是底部（页脚）

Answer 1

Backstretch将始终尝试保持图像的纵横比，因此对于某些窗口尺寸，您看不到图像的底部。

它只能用CSS完成，这可能不是你需要的，它可以与提供的图像一起使用，因为它可以在x轴上重复：

html { 
  background: url(http://i.stack.imgur.com/10zrl.jpg) repeat-x center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: auto 100%;
}

Jquery插件：backstretch不能正常工作

1 个答案: