0

私はオンラインで周りを見回して、これを回避するためにさまざまな方法を試しましたが、私に役立つ1つのテクニックを見つけることができませんでした。ウェブサイトの背景画像を中央に配置し、ブラウザ画面全体に表示して、レスポンシブデザインで作業したいと思います。

CSS3 / background-size：cover以外に、簡単なテクニックはありますか？それは私にとってはまったく機能しませんでした（理由はわかりません...）。

4

4 に答える 4

3

ライブデモ

body{
  background:url(img.jpg) center center fixed;
  background-size:cover; // CSS3 *
}

注： CSS3。他の古いブラウザの場合は、できるだけ醜いものにしてください。;）

于 2013-03-25T00:39:24.513 に答える
2

CSSに加えてHTMLを含むソリューションに反対しない場合は、タグを使用してbackground-size: cover動作をシミュレートできます。img

HTML：

<body>
    <div id="image-matte">
        <img src="..."/>
    </div>

    ... Page content below ...

</body>

CSS：

#image-matte {
    position: fixed;
    top: 0%;
    left: -50%;
    width: 200%;
    height: 200%;
}

#image-matte img {
    display: block;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

編集：垂直方向と水平方向に中央揃えの背景画像を取得するには、ラッパーdivと画像自体を保持する内部divの間にテーブル/テーブルセルの関係を作成する必要があります...HTMLとCSSは次のようになります：

HTML：

<div id="image-matte">
    <div>
        <img src="..."/>
    </div>
</div>

CSS：

#image-matte {
    position: fixed;
    display: table;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    text-align: center;
}
#image-matte div {
    vertical-align: middle;
    display: table-cell;
}
#image-matte img {
    position: relative;
    text-align: center;
    min-height: 50%;
    min-width: 50%;
}

/* Covers the image to prevent pointer interaction */
#image-matte:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

実例： http： //jsfiddle.net/qkpvb/

于 2013-03-24T23:44:04.200 に答える
0

すべてのブラウザでうまく機能するために、jQueryを使用してこのソリューションを提案します：

HTML

<img src='./templates/lights3.jpg' alt="bg" id="bg"/>

CSS

#bg { 
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: -5000; // Yes I always overdo ^^ (that's not very clean)
}

.bgwidth { 
    width: 100%;
}

.bgheight { 
    height: 100%;
}

JQUERY

$(window).load(function() {    
var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();              
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }           
}                           
theWindow.resize(resizeBg).trigger("resize");
});

このソリューションはレスポンシブで、ブラウザウィンドウのサイズに応じて背景画像のサイズを変更します。

于 2013-03-26T11:07:53.267 に答える
0

リンク内のタグまたはcss内にこのhtmlタグを追加してみてください。

<img src="img/beach.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.htmlg

于 2014-09-25T09:09:30.613 に答える