Question

我尝试使用CSS将背景和对象的位置设置为所有可能的类型（固定，相对，绝对）。我还调整了背景图像的宽度，最小宽度。

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>

谢谢！我四处搜寻，有一些我想做的事情，但似乎无法找到我想要的东西。

Answer 1

您不能将相对大小的背景与具有固定大小和固定边距的元素组合在一起，并且期望固定元素在您调整窗口大小时“跟随”背景。

我的建议是你也使用固定大小的背景，这是让其他元素（菜单等）最终到达预期位置的唯一方法。

另外，在创建背景时，你应该使用CSS背景属性，而不是像你一样使用图像。

此：

<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png">

应该是这样的：

body { background: url('http://thebkk.net/Images/BVF-Template-Complete.png') no-repeat; }

Answer 2

您可能想要阅读“响应式网络”。在制作流体网格方面有很多想法可能有助于你正在做的事情。

无论如何，我不知道你是否会得到你想要的东西，只与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需要宽度：100％风格。

现在，您正在使用菜单图像作为背景，这些图像不会很流畅，所以就像您对主背景图像所做的那样，您需要使用菜单。

然后，您需要将菜单容器宽度设置为较大容器的百分比（即背景图像）。

要获得此％，您需要将菜单所需区域的宽度除以总容器宽度。

您的背景图片看起来像是1280像素。 “窗口”的总宽度类似于214px。

这意味着菜单的宽度应为：

214px / 1280px = 0.1671875 * 100％= 16.71875％

然后，您需要使用与使用相同的CSS正确放置菜单容器，但使用％而不是像素，因为这将允许定位随浏览器大小移动。

该背景“窗口”的左上角看起来像是从左边开始20像素，从顶部开始向下263像素。

20px / 1280px = 0.015625 * 100％= 1.5625％

left: 1.5625%

263px / 960px = 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>

我或多或少只使用位置：绝对“浮动”所有内容作为背景图像的比率/百分比，拉伸到浏览器的100％宽度/高度。

必须定义高度/宽度（并将边距/填充设置为零以重置浏览器默认值）。

Chrome似乎运作良好。 FF似乎有高度问题：100％。它可能会被清理一些，但这应该是你想要用CSS做什么的开始。

但就像我说的那样，这种东西在CSS中处理得不好，即使使用CSS3，这种设计也会给后向兼容性带来很多麻烦。

HTML 5就在这里，这也不会是一个神奇的子弹。这个设计概念是基于矢量的，Flash非常适合这种事情。

希望这有帮助！ =）

如何使对象相对于背景而不是浏览器窗口移动？

2 个答案: