Question

我在Photoshop CS4中创建了一个网页，将其切片，然后将其扔进Dreamweaver CS4的表格中。 http://www.themegan.info/lab4/index.htm（粗略开始，我知道）现在，我该如何将文字置于图像之上？我使用CSS吗？我现在很困惑。

Answer 1

<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>

Answer 2

您可以将图像用作布局“部件”到css的背景。即。

HTML：

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

的CSS：

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

Answer 3

除非您希望用户与图像（即导航菜单图像）进行交互，否则应使用css background-image属性使设计元素转到后台。例如：

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

然后，您放入td元素的任何文本都将自动显示在图像的顶部。这一点尤其重要，因为这意味着在维护您的网站时需要的维护要少得多。

Answer 4

如果您使用的是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>

需要将文本放在表格中的图像上

4 个答案: