Question

我在互联网上看过一些这方面的话题，但没有一个与解决我的问题有关。我目前正在使用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;
}

Answer 1

您似乎选择了一个不存在的元素（.foo）以用于后伸。

而不是：

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

试试这个：

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

http://jsfiddle.net/89V38/

jQuery Backstretch固定高度

1 个答案: