我尝试使用 CSS 将背景和对象的位置设置为所有可能的类型(固定、相对、绝对)。我还调整了背景图像的宽度，最小宽度。
The Test Page
CSS:
/* BG Image Style */
.bg {
position: relative;
width: 100%;
height: 100%
}
/* Player Style */
#player {
position: absolute;
width: 680px;
top: 60px;
left: 380px;
border: outset 5px white;
}
/* Nav Menu */
ul#menu {
position: absolute;
top: 175px;
left: 68px;
padding: 0;
list-style: none;
clear: both;
}
HTML:
<html>
<head>
<title>BKK Testing Zone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>
<div id="player">
<script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>
</script>
<div id='mediaspace'></div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
'backcolor': '000000',
'frontcolor': '00FFFF',
'lightcolor': '33FF33',
'playlist': 'right',
'controlbar': 'bottom',
'width': '680',
'height': '360',
});
</script>
</div>
<ul id="menu">
<li class="home"><a href="http://thebkk.net"></a></li>
<li class="rules"><a href=""></a></li>
<li class="forums"><a href="http://forum.thebkk.net"></a></li>
<li class="links"><a href="" alt="Links"></a></li>
</ul>
</body>
</html>
谢谢!我四处寻找，有些部分是我想做的，但似乎找不到我想要的东西。
最佳答案
您可能想阅读“响应式 Web”。那里有很多关于制作流体网格的想法，这些想法可能对你正在做的事情有所帮助。
无论如何，我不知道你是否会得到你想要做的事情来完美地与 CSS 一起工作。您可能还必须使用一些 JavaScript。
我会重新开始并尝试为基本的 HTML 做这样的事情:
<body>
<div class="container">
<div class="media"></div>
<div class="menu"></div>
<img src="background.png" />
</div>
</body>
我会把东西放在一个容器 div 中，只是因为我不喜欢直接使用 CSS 的 body 元素。它是一个更独立的模块。
至于 CSS，你会让你的背景图像像你一样。
然后，您的菜单将需要将图像放入带有 IMG 标记的列表项 (LI) 中。那些 IMG 将需要一个 width:100% 样式。
现在，您正在使用菜单图像作为背景，这不会很好地流动，所以就像您对主背景图像所做的那样，您需要对菜单进行处理。
然后，您需要将菜单容器宽度设置为较大容器(即背景图像)的 %。
要获得此百分比，您需要将您希望菜单适合的区域的宽度除以容器的总宽度。
您的背景图片看起来像 1280 像素。 “窗口”的总宽度为 214px。
这意味着菜单的宽度应该是:
214 像素/1280 像素 = 0.1671875 * 100% = 16.71875%
然后，您需要使用与使用时相同的 CSS 正确放置菜单容器，但使用 % 而不是像素，因为这将允许定位随浏览器大小移动。
该背景“窗口”的左上角看起来像是从左侧开始 20 像素，从顶部向下 263 像素。
20 像素/1280 像素 = 0.015625 * 100% = 1.5625%
left: 1.5625%
263 像素/960 像素 = 0.27395833333333333 * 100% = 27.39583333333%
top: 27.39583333333%;
现在，菜单容器应该具有与背景图像(这是您试图将菜单对齐的内容)成比例的宽度，这意味着它应该与背景图像展开或收缩。
记住菜单 HTML 必须是这样的:
<ul>
<li><img src="..." alt="" /></li>
[...]
</ul>
使用 CSS:
#menu li img{
width:100%;
}
我不确定这是否可行，但它可能会让你朝着正确的方向前进。无论如何，我不认为这是非常好的结果。
在这种情况下，您最好制作一个完整的 Flash 网站(尽管我不喜欢使用 Flash)。
我希望这会有所帮助!
干杯!
- 更新 -
我整理了一些概念验证。我只在 Chrome 和最新的 FF 中测试过。正如我所料，你可以让它工作，但你会遇到支持问题。
无论如何，这是我用基本上 2 个目标区域(框)制作的背景图像。它与原版相似。
背景图像(1000x750。我从 1024x768 或 iPad 尺寸开始，并将其设置为 1000px 宽以便于百分比)
http://tinypic.com/r/11r9edw/5
菜单图片 1
http://tinypic.com/r/2s7ucmg/5
菜单图片 4(为简洁起见，我将跳过上传所有菜单图片)
http://tinypic.com/r/2nlv42x/5
CSS(百分比很草率，但这只是一个概念验证)
body{
margin:0;
padding:0;
}
.container{
position: relative;
width: 100%;
height: 100%;
background-color:#F0F;
}
.bg-img{
display:block;
position: relative;
width: 100%;
height: 100%;
z-index:1;
}
.menu{
position:absolute;
width:15%;
height:33%;
top:33%;
left:10%;
border:1px dashed red;
z-index:10;
}
.menu ul{
height:100%;
margin:0;
padding:0;
}
.menu li img{
width:100%;
height:100%;
margin:0;
padding:0;
}
.menu li{
position:relative;
height:24.5%;
}
.media{
position:absolute;
width:43%;
height:15%;
top:16%;
left:31%;
background:#9CC;
z-index:10;
}
的HTML
<div class="container">
<img class="bg-img" src="bg.png" alt="" />
<div class="menu">
<ul>
<li><a href="#"><img src="menu1.png" alt="Menu 1" /></a></li>
<li><a href="#"><img src="menu1.png" alt="Menu 2" /></a></li>
<li><a href="#"><img src="menu4.png" alt="Menu 3" /></a></li>
<li><a href="#"><img src="menu4.png" alt="Menu 4" /></a></li>
</ul>
</div>
<div class="media"></div>
</div>
我或多或少只是使用 position:absolute 将所有内容“ float ”为背景图像的比率/百分比，它被拉伸(stretch)到浏览器的 100% 宽度/高度。
定义的高度/宽度是必要的(并将边距/填充设置为零以重置浏览器默认值)。
Chrome 似乎运行良好。 FF 似乎对 height:100% 有问题。有可能它可以被清理更多，但这应该是你想要用 CSS 做的事情的开始。
但是就像我说的，这种事情在 CSS 中并没有很好的处理，即使使用 CSS3 这种设计也会给向后兼容性带来很多麻烦。
HTML 5 就在这里，它也不会是 Elixir 。这种设计理念非常基于矢量，而 Flash 非常适合这种东西。
希望这可以帮助! =)
关于html - 如何使对象相对于背景而不是浏览器窗口移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8809864/