3

サイズが 1620*1080 の背景画像があり、画面解像度は 1366*768 です。画面の約 15% (右側の部分) をカバーしていない可能性はありますか?

これが私のコードです:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { 
    min-height: 100%;
    min-width: 100%;
    background-image:url(background.png);
    background-repeat: no-repeat;
}

div#container {
    margin: 0 auto;
    background-color: red;

}
</style>
</head>
<div id="container">

</div>
<body>
</body>
</html>

ご覧のとおり、追加しました

min-height: 100%;
min-width: 100%;

役立つかもしれないと思った。画面background-repeat: no-repeat;を覆わないからこそ存在するのです。

何か案は?ありがとう!

4

2 に答える 2

8

これを試して:

body { 
    background: url(background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これにより、ウィンドウが画像よりも大きくても小さくても、フルサイズの背景画像が表示されます。

それでもうまくいかない場合は、この css-tricks postの残りの部分を読んでください。

于 2012-11-13T19:32:33.630 に答える
4

画像の比率は1620/1080=1.5,で、画面の解像度は1366/768=1.77です。基本的に何が起こっているかというと、画像は拡大縮小されたまま小さいサイズで表示されます。右側のエリアは封鎖されています。

サイズを投稿してみてください

background-size:100% 100%;
于 2012-11-13T19:34:48.600 に答える