移動文本，同時保持CSS中的背景圖像

我有一個'main_menu'div，它包含一個在y軸上重複的背景圖像。在這個div上面，我有另一個用於標題的div。問題是標題div的圖像高度大約爲75px。我想從main_div的背景圖像實際開始的地方開始，main_div中的文本大約高出50px。移動文本，同時保持CSS中的背景圖像

我想的是一樣的東西：

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文字約50像素上漲

來源

2009-07-14 Ori

發表更多你的代碼 – 2009-07-14 05:15:03

使用負的上邊距。

.menu_main UL {邊距：-50px;}

來源

2009-07-14 10:51:11 Emily

你可以移動它就像你用絕對定位做的和移動的背景下，像這樣：

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

這將移動你的BB圖像，所以它開始50px下來。

我也許能幫助更多的，如果你提供的截圖或多個代碼或活生生的例子......

來源

2009-07-14 05:20:55

你可以明確的風格你UL：

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

和

<ul class="nav"> 
...

或者將UL放在另一個DIV class =「nav」中。

來源

2009-07-14 05:45:44 hyperslug

但你可以（由5個像素爲例）移動的背景下：

background-position: top 5px;

來源

2012-08-22 21:12:21 Deed

移動文本，同時保持CSS中的背景圖像

回答

相關問題