Question

我想在具有x重复背景的网站上放置徽标和菜单，我希望这两个版本始终显示在背景的同一区域（背景上有更亮的条纹和logo应该始终在其中，而菜单项应该低于它。）

由于徽标和菜单图像根据屏幕尺寸进行缩放，背景重复，我无法让它在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%;
}

非常感谢！

Answer 1

诀窍是使div成为正确的高度，并使图像在div中垂直居中。

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

请参阅此Fiddle。

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

CSS：定位与背景图像相关的图像

1 个答案: