0

タイル張りの背景の本文画像を含む Web ページがあります。デザイナーはブラウザ ウィンドウに合わせてスケーラブルにする必要があるため、並べて表示する必要があります。それは、サイトの残りの部分が設計されている非常に特殊なグリッドを作成します.

デザイナーはパターンをブラウザーの側面から離したいので、その周りに白いページ境界線もあります (より高い z-index を持つ別の div を介して作成されます)。

次のページ全体をフェードアウトする必要があります。体にフェードインしようとすると、画面はすでにそこにあるパターンから始まります。そして、遊んでいるうちに、背景をフェードインさせることもできましたが、その後、他のすべてがフェードアウトします. また、ボディのすぐ下の div に bg パターンを配置しようとしましたが、Safari で奇妙なことをするようです。

次のチュートリアルも試しましたが、役に立ちませんでした。

http://blog.anselmbradford.com/2009/08/28/how-to-add-a-simple-webpage-fade-in-effect-using-jquery/

私の考えは、どういうわけかすべてをオーバーレイする白い div を作成し、それをフェードアウトすることです。しかし、この div でボディの背景画像を含むすべてをカバーするにはどうすればよいでしょうか?

ここで何か大きなものが欠けているような気がします...

私が作業している関連コードは次のとおりです。

HTML:

<body id="home">

<div id="pgborder"></div><!-- end #pgborder-->

<div id="main">

<ul id="nav">
      <li><a href="us.html">us</a></li>
      <li><a href="work.html">work</a></li>
      <li><a href="contact.html">contact</a></li>
</ul>

</div><!-- end #main--> 

<div id="logo">

  <a href="home.html"><img src="images/logo.gif" width="345" height="24" alt="manuchugh logo"/></a>

</div><!-- end #logo-->

</body>

CSS:

html, body {
  height: 100%;
  font-family: "century gothic", arial, sans serif;
  color: #8c8d8d;
  font-size: 15px; 
  overflow: auto;
  background:#fff url('../images/bg.gif');
  }

#pgborder {
  border: 22px #fff solid;  
  }
4

1 に答える 1

1

背景画像も適用しているので、色褪せないのではないかと思いますhtml。

次の行をから削除してみてくださいhtml, body {

background:#fff url('../images/bg.gif');

bodyCSSにセレクターを付けて配置します。

body {
    background:#fff url('../images/bg.gif');
}
于 2010-08-24T19:36:15.917 に答える