在 CSS 中移动文本，同时保留背景图像
我有一个“main_menu”div，其中包含在 y 轴上重复的背景图像。 在这个 div 上方我有另一个用于标题的 div。 问题是 header 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 高的文本
I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the 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;
}
This is the 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>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
使用负上边距。
.menu_main ul {边距顶部：-50px;}
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
您可以像使用绝对定位一样移动它，并将背景向下移动，如下所示：
这将移动您的背景图像，使其开始向下 50px。
如果您提供屏幕截图或更多代码或实例，我可能可以提供更多帮助......
You could move it like you were doing with absolute positioning and move the background down like so:
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
您可以专门设计您的 UL：
或者
将 UL 放在另一个 DIV class="nav" 中。
You could style your UL specifically:
and
Or perhaps put the UL in another DIV class="nav".
但您可以将背景向下移动（例如 5 像素）：
But you can move the background down (for example by 5 pixels):