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

标签 css html positioning background-image

我有一个“main_menu”div,其中包含一个在 y 轴上重复的背景图像。在这个 div 之上,我有另一个用于标题的 div。问题是标题 div 的图像高度约为 75px。我想在 main_div 中的文本开始位置比 main_div 的背景图像实际开始位置高约 50 像素。

我在想这样的事情:

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

最佳答案

使用负的上边距。

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

关于css - 在 CSS 中保留背景图像的同时移动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1123528/

相关文章:

javascript - 购物篮小计

Css 菜单,悬停时不隐藏当前菜单链接

jquery - 为什么我的 jQuery 变量不起作用?

css - 如何从左到右制作 svg svg 笔划线动画?

html - 如何使 float 扩展宽度?

javascript - 努力定位使用 jQuery 创建的 div 元素

css - 带有标签 :hover and relative positioning 的 chrome 问题

html - 导航栏没有出现在我的页面顶部,出现在奇怪的地方

c++ - 用于 Metro 风格应用程序的 HTML/CSS 渲染器

javascript - 使用 javascript 设置输入元素的值并使用 php 获取该值