0

タイトルがほとんどを物語っています。すべてのサイト div と背景を保持する div コンテナーがあります。画面を最大から外した場合、または別のモニター サイズ/ピクセル上にある場合 (画面いっぱいにならない作業中のコンピューターがありますが、私のワイドスクリーンはおよび他のほとんどの場合)。また、最大画面から取り出すと、サイトの一部が切り取られますが、その理由はわかりません.

関連する CSS:

body {

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: lightsteelblue;
font-size: 14px;
background-image: url("../images/hardcoregames-bg-final.png"); 
-webkit-background-size: 100%; /*for webKit*/
-moz-background-size: 100%; /*Mozilla*/
-o-background-size: 100%; /*opera*/
background-size: 100%; /*generic*/
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
}
#maindiv {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#navigation {
position: absolute;
top: 50px;
/*left: 360px;
margin: 0px;*/
left: 50%;
margin-left: -325px;
z-index: 10000;
width: 650px;
height: 100px;
padding: 50px 20px;
background-color: transparent;
float: left;
}

そして、私のマークアップは単純です:

<body>
    <div id="maindiv">
        <div id="navigation">
            <img src="images/hardcoregames-logo1.png"></img> 
        </div>
        <div id="other divs just like navigation but positioned in different spots">
            stuff
        </div>
    </div>
<body>

実際の動作を確認するには:サイト background-size で幅と高さの両方に 100% を使用してみましたが、高さが auto でない場合はさらに悪化しました。メインのdivを絶対として入れてみました。background-size を使用してカバーしようとしました。追加するには、これについてここで他のものを見てきましたが、これまで読んだアイデアはどれもうまくいきませんでした。背景を修正したくありません。画像はメインページと同じくらい大きいので、その通りです。

PS 少なくとも IE の最大化画面から抜け出すと、「maindiv」もカットされることを思い出してください。どちらも幅/高さに関係していると思うので、背景の問題を追加しましたが、やはりわかりません。投稿したコードは、画面のサイズを十分に小さくしてから右にスクロールするまで、正しく機能します。また、ほぼ同じサイズのIE画面では、サイトの左端まで行くことができなくなり、途切れてしまいます。

左右いっぱいにスクロールして表示される画像。右にスクロールすると、ページの 1/3 が切り取られます。右にスクロールすると、背景が完全に埋まらず、見栄えが悪くなります。写真

4

5 に答える 5

1

私が正しく理解していれば...

最も広い標準画面解像度 (2560) と最小画面比率 (4:3) に十分な大きさの背景画像を作成します。サイズ 2560 x 1920 の背景を作成し、'background-size: 100% auto' を設定すると、すべてのモニターの背景が問題なく塗りつぶされます。

于 2012-07-25T04:34:42.037 に答える
1

このスタイルを使用すると、さまざまな解像度で背景を引き伸ばすことができます。

body, html
{
  font-size:14px !important;
  color: lightsteelblue;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: url("../images/hardcoregames-bg-final.png"); 
  background-repeat: repeat-x;
  background-color: #222;
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2012-07-25T05:03:16.327 に答える
1

Issue could be with background-size. If the computer at your work was using Internet Explore 8 or below, background-size is not supported. If this is issue I can explain a work around, let me know.

EDIT: Was not IE 8, try below.

html { 
  background: url('../images/hardcoregames-bg-final.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2012-07-25T04:39:24.760 に答える
1

削除するbackground-position: top left; と解決します。これにより、ウィンドウのサイズに関係なく、ロゴが常にウィンドウの左上に表示されます。

于 2012-07-25T04:48:17.887 に答える
0

このセットアップは、最大画面を取り出したときに Web ページの「カットオフ」を修正したものです。固定 ありがとう @Mr. エイリアン

背景用。私の研究では、明らかであったはずですが、人がCSSだけでIEのウィンドウサイズを変更するため、背景を「動的に」変更することはできません。これにより、私が見る限り、初期画面サイズごとに背景が機能するように修正されました。

html, body {
    height: 100%;
    width: 100%;
    background-image: url("../images/hardcoregames-bg-final.png"); 
    -webkit-background-size: 100% auto; /*for webKit*/
    -moz-background-size: 100% auto; /*Mozilla*/
    -o-background-size: 100% auto; /*opera*/
    background-size: 100% auto; /*generic*/
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #222;
}

これについて間違っている場合は、訂正してください。しかし、私ができる最善のことは、最初に背景のサイズを変更することです。それだけです。動的に動作する問題であるため、JavaScript、またはさらに良いことに、jquery でこれを修正できると思います。今のところこの回答を開いたままにし、間違っている場合はコメントしてください。間違ったメッセージを出してほしくありません。

于 2012-07-26T04:07:23.400 に答える