0

coverプロパティを使用して、背景を塗りつぶし、ブラウザでサイズを変更する背景画像を作成しています。しかし、1つの問題が発生しました。ページに多くのコンテンツがあり、下にスクロールするためのスクロールバーが表示されません。これが私が使用しているコードです:

body{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* Cover for IE 7/8 */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
    /* End Cover for IE 7/8 */
    background-size: cover;
    background-color: transparent !important;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    max-width:2500px;
    max-height:1500px;
    z-index:1;
} 

削除するposition:fixed;とスクロールバーは元に戻りますが、背景画像が消えます。これに取り組み、スクロールバーと背景カバー画像の両方を使用するための最良の方法は何ですか?

注:私はjQueryを使用しており、それが機能する場合はJSの回答を使用します(ただし、CSSのみの回答が好きです)。

アップデート

私はから削除fixedしました:

背景:url(path.jpg)繰り返しなしの中央の中心が修正されました。

スクロールバーが再び表示されますが、スクロールすると、スクロールすると画像が黒い背景で覆われます。画像を固定してスクロールバーを表示したいです。

これがフィドルです。

4

4 に答える 4

0

本文ではなくHTMLにスタイルを追加してみてください...

html{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
于 2012-09-19T06:46:44.397 に答える
0

背景画像の方法を変更して、ここにある方法を使用しました。

コードは次のとおりです。

html, body {
 height: 100%;
 width: 100%;
 padding: 0;
 margin: 0;
}

#full-screen-background-image {
 z-index: -999;
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;
}

#wrapper {
 position: relative;
 width: 800px;
 min-height: 400px;
 margin: 100px auto;
 color: #333;
}

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
      <p>Content goes here...</p>
  </div>
</body>

画像の上に背景が表示されていることがわかったので、このクラスを本文に追加しました。

.transparent{
background-color: transparent !important;
}

発生したもう1つの問題は、背景が黒で、背景が透明で、画像が読み込まれる前に白が表示されることでした。この問題を回避するために、読み込みdivを作成し、ページを読み込んでから、クラスを本文に追加しました。

コード:

HTML

<body>
   <div id="loading">
  <h2 class="textcenter">Loading...</h2>
  <img id="loading-image" class="center" src="ajax-loader.gif" />
</div> 
 <div style="display:none;" id="content-wrap">
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
      <p>Content goes here...</p>
  </div>
 </div>
</body>

JS

$(window).load(function() {
  $('#loading').fadeOut('slow', function() {
    $("#content-wrap").fadeIn("slow", function() {
      $("body").addClass("transparent");
   });    
 });   
});

最後に、IE 8以降、Firefox、Chrome、Safari、Operaをテストし、実際に機能するソリューションで終わります。=>

于 2012-09-19T06:32:15.250 に答える
0

背景サイズのカバーの代わりに 100% を配置するだけで、高さ:100% をオーバーレイに追加すると、背景画像は任意のサイズのコンテンツに含まれる必要があります。

body{ 
    background: url(path.jpg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    /* Cover for IE 7/8 */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
    /* End Cover for IE 7/8 */
    background-size: 100%;
    background-color: transparent !important;
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    max-width:2500px;
    max-height:1500px;
    z-index:1;
} 
.overlay{
    background: rgb(0, 0, 0); /*Fallback */
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 5px;
    position:relative;height:100%;
}
于 2012-09-19T07:27:22.313 に答える
0

ページによっては、残りの HTML/CSS によっては、本文が 100% の幅/高さにサイズ変更されない場合があります。フローティング/絶対配置要素はありますか?

、、および属性とposition:fixed同様に削除して、指定した CSS の上にこれを追加してみてください。topbottomheightwidth

html, body {
    min-height: 100%;
    min-width: 100%;
    max-width: 2500px;
    max-height: 1500px;
}

本文に影響を与える可能性があるため、レイアウトの HTML/CSS のスニペットを確認すると役立ちます。

于 2012-09-19T03:36:31.940 に答える