我已经在互联网上看到了一些有关此主题的信息，但是与解决我的问题无关。我目前正在使用jQuery插件Backstretch，并已成功地将其实现为整个页面的背景。但是，我想在固定高度的div中使用它。因此，它不是占据整个页面，而是充当图像滑块。
我使用了Backstretch的Github上的文档来尝试实现它，但是没有运气。 div本身被切开（应该有一个大的空白），但是没有图像。
谢谢您的帮助！
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crimson+Text">
<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
</head>
<body>
<div class="backstretch">
<script>
$(".foo").backstretch("test1.jpg");
</script>
</div>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</body>
</html>
带有样式：
.backstretch{
width: 100%;
height: 500px;
}
最佳答案
似乎您正在选择不存在的元素（.foo）与backstretch一起使用。
代替这个：
$(".foo").backstretch("test1.jpg");
尝试这个：
$(".backstretch").backstretch("test1.jpg");
http://jsfiddle.net/89V38/