3

私のクライアントは、サイトのホームページに大きな画像を表示したいと考えていますが、ページが読み込まれたときに画像のみが表示されるようにしたいと考えています。ページの残りの部分はすべてこの画像の下にあり、ページがスクロールされた場合にのみ表示されます。ページが最初に読み込まれるとき、訪問者は、使用するモニターのサイズや解像度に関係なく、大きな画像のみを見る必要があります。

このようなもの：

Screen boundary ->----------------- |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
Screen boundary ->----------------- |
                  Content           |
                  Content           | <- scroll bar

それは可能ですか？この情報が重要な場合は、Wordpress サイトです。

どうもありがとう！

4

1 に答える 1

6

これはCSSだけで実行できます。

body, html {
  margin:0;
  height: 100%;
}
#foo {
  background-color:#ccc;
  height: 100%;
}

<div id="foo">hello. content goes here</div>
rest of my content<br />

デモ

divに背景画像を設定し、さまざまなbackground-sizeプロパティを試して、好きなように見せることができます。

于 2012-10-11T21:01:46.693 に答える