gpt4 book ai didi

css - 无法使用不同的屏幕尺寸正确定位 div 和背景

转载 作者:太空宇宙 更新时间:2023-11-03 21:59:19 25 4
gpt4 key购买 nike

标题说明了大部分内容。我有一个包含所有站点 div 和背景的 div 容器。如果您将屏幕从最大屏幕上移开,或者它在不同的显示器尺寸/像素上,我只是想使背景正确“拉伸(stretch)”(有一台工作中的计算机没有填满屏幕,但我的宽屏和大多数其他人一样)。此外,如果您退出最大屏幕,它会切断网站的部分内容,我不知道为什么。

相关 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>

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

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

显示的图像一直左右滚动。向右滚动,它切断了页面的 1/3。向右滚动,bg 并没有完全填满,看起来很愚蠢。 pics

最佳答案

如果我没理解错的话...

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

关于css - 无法使用不同的屏幕尺寸正确定位 div 和背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11642516/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com