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 に答える