0

我想在具有 x 重复背景的网站上放置一个徽标和菜单,我希望这两个始终显示在背景的同一区域(背景上有一条更亮的条纹,徽标应该始终在其中,而菜单项应该在它下面一点)。

由于徽标和菜单图像根据屏幕尺寸缩放并且背景只是重复,我无法让它在 y 轴上工作 - 知道如何做到这一点吗?

该页面是 sarahreesbrennan-fans (dot) com - 如果您看一下,您就会明白我的意思。(这只是为了看看我在说什么,以防有人无法从描述中想象出来)。

我的页面代码是:

<div id="bg_wrapper"><img src="/wp-content/uploads/2013/08/floral.png" /></div>
<div id="logo"><img src="/wp-content/uploads/2013/08/logo1.png" width="50%" /></div>

和CSS:

body {
color: #444444;
font-family: verdana, sans-serif;
font-size: 10pt;
background: url(/wp-content/uploads/2013/08/page-back.gif) repeat-x #22221f;
}
#bg_wrapper {
position:absolute;
z-index:-1;
width:100%;
text-align:center
}
#logo {
padding-top: 3%;
padding-left: 3%;
}

非常感谢!

4

1 回答 1

0

诀窍是使 div 具有正确的高度,并使图像在 div 中垂直居中。

#logo {
  padding-top: 0;
  padding-left: 3%;
  height:128px; line-height:128px;
}
#logo img {vertical-align:middle;}

看到这个小提琴

(注意,在小提琴中,我还width:100%从 中删除了#bg_wrapper,因为即使窗口足够宽,也会导致出现水平滚动条。)

于 2013-08-15T20:05:00.970 回答