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>

看看它的实际效果： 我尝试过在背景尺寸中对宽度和高度都使用 100% 的站点，但这使得高度不是自动的情况变得更糟。我尝试将主 div 设置为绝对。我试过使用背景大小来覆盖。补充一下，我在这里看到了其他的东西，但到目前为止我读过的想法都没有奏效，我不想固定背景，图像和主页一样大，所以我想要就这样。

PS 请提醒一下，至少在 IE 上退出最大化屏幕时，“maindiv”也会被切断。我在背景问题中添加了这个问题，因为我认为它们都与我的宽度/高度有关，但话又说回来我真的不知道。我发布的代码可以正常工作，直到您将屏幕调整得足够小，然后向右滚动。同样在大约相同大小的 IE 屏幕上，你不能一直在网站上离开，它被切断了。

显示的图像一直向右和向左滚动。向右滚动，它会切断页面的 1/3。向右滚动，bg 没有完全填满，看起来很笨。图片

4

5 回答 5

1

如果我理解正确...

为最宽的标准屏幕分辨率 (2560) 和最小的屏幕比例 (4:3) 创建足够大的背景图像。创建大小为 2560 x 1920 的背景并设置“背景大小：100% 自动”应该让它在所有显示器上填充背景而没有任何问题。

于 2012-07-25T04:34:42.037 回答
1

问题可能与背景大小有关。如果您工作的计算机使用 Internet Explorer 8 或更低版本，则不支持 background-size。如果这是问题，我可以解释解决方法，让我知道。

编辑：不是 IE 8，试试下面。

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 回答
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 回答
0

此设置修复了退出最大屏幕时网页的“截断”问题。固定 谢谢@Mr。外星人

作为背景；在我的研究中，应该很明显，你不能“动态地”改变背景，因为人改变了 IE 的窗口大小，比如 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 回答