94

HTML要素（body、divなど）の背景画像を取得して、幅と高さ全体を拡大しようとしています。

運が悪い。それは可能ですか、それとも背景画像以外の方法で行う必要がありますか？

私の現在のCSSは次のとおりです。

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

前もって感謝します。

編集：私はガブリエルの提案でCSSを維持することに熱心ではないので、代わりにページのレイアウトを変更しています。しかし、それが最良の答えのように思われるので、私はそれをそのようにマークしています。

4

13 に答える 13

203 
<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
于 2011-03-16T20:21:03.050 に答える
14

プロパティを使用しbackground-sizeます：http ：//www.w3.org/TR/css3-background/#the-background-size

于 2009-07-09T12:52:34.810 に答える
9

要するに、これを試すことができます....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

cssとjsをほとんど使用していない場所...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

そして、それは私にとってはうまくいっています。

于 2013-05-07T10:44:27.727 に答える
6

背景画像を引き伸ばすことが可能かどうかわからない。すべてのターゲットブラウザでそれが不可能または信頼できない場合は、z-indexを低く設定し、位置を絶対に設定して、他のコンテンツがその上に表示されるように、ストレッチimgタグを使用してみてください。

最終的に何をするのか教えてください。

編集：私が提案したのは、基本的にガブリエルのリンクにあるものです。だからそれを試してみてください:)

于 2008-10-25T03:50:51.430 に答える
5

@PhiLhoの回答を拡張するには、次を使用して、ページの非常に大きな画像（または任意のサイズの画像）を中央に配置できます。

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

または、画像の背景と一致する背景色を持つ小さな画像を使用することもできます (無地の場合)。これは、目的に合う場合と合わない場合があります。

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
于 2008-10-27T19:09:49.583 に答える
5

画面のサイズ変更中に背景画像を引き伸ばす必要があり、古いブラウザ バージョンとの互換性が必要ない場合は、次のようにします。

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
于 2016-12-22T16:48:08.353 に答える
3

大きな横長の画像がある場合、この例では縦長モードで背景のサイズを変更して、上部に表示し、下部を空白のままにします:

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

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
于 2015-06-12T19:50:39.333 に答える
3

次のコードは、求められた効果を達成するために主に使用します。

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
于 2015-07-09T14:33:29.243 に答える
0

純粋な CSS ではできません。他のすべてのコンポーネントの背後にあるページ全体を画像で覆うことが、おそらく最善の策です (それが上記の解決策のようです)。とにかく、とにかくひどく見える可能性があります。ほとんどの画面解像度をカバーするのに十分な大きさの画像 (たとえば、最大 1600x1200、それ以上のものは少ない) を試して、ページの幅を制限するか、タイルの画像を使用するだけです。

于 2008-10-25T14:15:48.230 に答える