0

我在互联网上看到了一些这样的主题，但是没有一个与解决我的问题相关。我目前正在使用 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;
}
4

1 回答 1

2

您似乎选择了一个不存在的元素 ( .foo) 用于回弹。

而不是这个：

$(".foo").backstretch("test1.jpg");

尝试这个：

$(".backstretch").backstretch("test1.jpg");

http://jsfiddle.net/89V38/

于 2014-03-05T00:59:24.890 回答