需要將文字放在表格中的圖像上

我在Photoshop CS4中製作了一個網頁，將其切片，放在Dreamweaver CS4的表格中。 http://www.themegan.info/lab4/index.htm（粗略的開始，我知道）現在，我該如何將文字置於圖像之上？我使用CSS嗎？我只是在這個時候感到困惑。需要將文字放在表格中的圖像上

來源

2011-02-12 Megan Kammermeier

我希望你已經猜到了，創建網站比使用Photoshop切片還要多一點。您需要學習如何從一開始就創建適當的HTML/CSS。 – thirtydot 2011-02-12 21:11:17

<td style="position:relative;"> 
    <img src="..." style="position:absolute;z-index:1;" /> 
    <div style="z-index:2;position:relative;">your text goes here</div> 
</td>

來源

2011-02-12 21:08:11 demas

是的，應該事先研究一下。我用絕對定位。不知道我以前怎麼沒想到它。謝謝。 – 2011-02-12 21:51:30

您可以通過css使用圖像作爲佈局「零件」的背景。即

HTML：

<div id="content">...text...</div>

CSS：

#content{ 
    background:url(..imgurl..) no-repeat top left; 
}

來源

2011-02-12 21:10:37 stecb

如果您正在使用DIV元素，則其可能會像

<div> 
<div>image</div> 
<div id="textDiv">text</div> 
</div>

實現這CSS

div.textDiv { 
position:absolute; 
top:220px; left:450px; 
width:242px; height:366px; 
z-index:7; 
}

個

的方法是使用圖層

<LAYER LEFT=220 TOP=450>Text</LAYER>

來源

2011-02-12 21:14:46 Ismail

除非你想你的用戶與圖像交互（即導航菜單圖像），您應該使用css background-image屬性使您的設計元素轉到背景。例如：

td#sidebar { background-image:sidebarimg.jpg no-repeat; }

然後，無論放入您的td元素的文本都會自動放在圖像的頂部。這一點尤其重要，因爲這意味着在維護您的網站時需要更少的維護費用。

來源

2011-02-12 21:14:52 Moses

需要將文字放在表格中的圖像上

回答

相關問題