在 CSS 中保留背景图像的同时移动文本答案

【问题标题】：moving text while keeping background-image in CSS在 CSS 中保留背景图像的同时移动文本
【发布时间】：2010-11-10 13:06:41
【问题描述】：

我有一个'main_menu' div，其中包含一个在 y 轴上重复的背景图像。在这个 div 上方，我有另一个 div 用于标题。问题是标题 div 的图像高度约为 75px。我想将 main_div 中的文本从 main_div 的背景图像实际开始的位置高出大约 50 px。

我在想这样的事情：

position:absolute; top:-50px;

这真的行不通。问题是如何将文本向上移动，同时将背景图像保持在正常位置。

谢谢

{编辑}

这是 CSS

.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;    

}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;    
}

这是html

<div class="menu_header">Some Header</div>
<div class="menu_main">
    <ul>
        <li>Educational Objective</li>
        <li>Projects</li>
        <li>Class Preparation</li>
        <li>Testimonials</li>
    </ul>
</div>

所以你可以看到标题非常高。所以我想在 menu_main div 中开始文本大约高 50px

【问题讨论】：

标签： css html positioning background-image

【解决方案1】：

使用负的上边距。

.menu_main ul {margin-top:-50px;}

【讨论】：

【解决方案2】：

您可以像使用绝对定位一样移动它，然后像这样向下移动背景：

background:url(someimage.png) repeat-y left 50px;

这将移动您的背景图像，使其开始向下 50 像素。

如果您提供屏幕截图或更多代码或实时示例，我可能会提供更多帮助...

【讨论】：

【解决方案3】：

您可以专门设置 UL 样式：

.nav
{
  position: relative;
  top: -50px;
}

和

<ul class="nav">
...

或者也许将 UL 放在另一个 DIV class="nav" 中。

【讨论】：

【解决方案4】：

但您可以将背景向下移动（例如向下移动 5 个像素）：

background-position: top 5px;

【讨论】：