0

答えを見つけるために、数時間ネットサーフィンをしたり、Web 開発に関する本を調べたりしました。サイズのイメージがあります1920x1289。この画像は背景に使用されます。画像を固定し、中央に配置し、ブラウザの表示領域を埋め、スクロール バーが表示されないようにしたいと考えています。background-size:cover;や bなどの純粋なcssを使用するソリューションに出くわしましackground-size:100% auto;た。私はCSSには精通していますが、jqueryには精通していません。次のスクリプトに出会いました。

http://louisremi.github.com/jquery.backgroundSize.js/demo/

私の質問は、どのオプションが私の目的に「最適」かということです。jquery を使用すると、パフォーマンスの問題が発生します。この方法をレスポンシブ Web サイトに使用します。私は特に、セマンティクスとクリーンなコーディングのために img プロパティの代わりに background プロパティを使用したいと考えていました。提案をいただければ幸いです。

4

3 に答える 3

2 
<style type="text/css">
    body {
        height: 100%;
        background: url('images/someimage.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

これは、すべてのブラウザーで適切にサイズ変更されます。

于 2013-01-13T11:22:42.333 に答える
1

IE7,8 に「さよなら」を言うことを恐れないのであれば、単純に
CSS3background-sizeを使用できます(およびいくつかのバックグラウンド位置センターのトリック):

jsBin デモ

<div id="bg"></div>


#bg{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:100%;
  background: url(bg.jpg) 50% / cover;
}
于 2013-01-12T05:32:50.610 に答える
1

css は jquery よりも少し高速であるため、明らかに優れたオプションです。古いブラウザーを気にしない場合は、css3 を使用してください。ただし、すべてのブラウザーで jquery を使用する場合は、それを実現するためにプラグインを追加しないでください。代わりに、画像を背景として設定せずに img タグ自体を使用することで、ちょっとしたトリックを試すことができます。

ここにコード

HTML

 <img src="your img source" id="backgroundImg"/>

CSS

#backgroundImg{
width:100%;
height:100%;
z-index:-100; //so it will not overlay on other elements
position:absolute;
top:0px;
left:0px;
}

Jクエリ

var backgroundResizeFun=function(){
$('#backgroundImg').css({
width:$(window).width()+'px',
height:$(window).height()+'px'
});
}
$(document).ready(function(){
backgroundResizeFun();
$(window).resize(function(){
backgroundResizeFun();
});
});
于 2013-01-12T05:52:22.433 に答える