Question

我有一个header.php，我正在尝试创建一个菜单。 “菜单”由3个彩色框组成，在那些颜色框中，我想放置链接到其他页面的文本。无论我尝试什么，我根本无法在彩色框（图像）中获取文本。这就是我到目前为止的“基本代码”。

    <html>

<link rel="stylesheet" href="/header_media/header.css" type="text/css" />

<body>



<!--THIS IS THE LOGO-->
<div id="logo"> 
<img src="/header_media/GTextured.png" width="75" height="50" hspace="0" vspace="0"/>
</div>

<div id="logo"> 
<img src="/header_media/shapeimage.png" style="position: relative; top: -40px; left: 90px;">
</div>




<!--THIS IS THE MENU SYSTEM-->
<div>
<div id="menu">
<img src="/header_media/red.png" width="100" height="25" style="position: relative; top: -40px; left: 300px;">
<img src="/header_media/green.png" width="100" height="25" style="position: relative; top: -40px; left: 301px;">
<img src="/header_media/blue.png" width="100" height="25" style="position: relative; top: -40px; left: 302px;">
</div>

</body>

</html>

感谢您的帮助！

Answer 1

<div id="menu" style="margin:auto; width:300px; height:25px;">
    <div style="float:left; width:100px; height:25px; background-image:/header_media/red.png; text-align:center;">test</div>
    <div style="float:left; width:100px; height:25px; background-image:/header_media/green.png; text-align:center;">test</div>
    <div style="float:left; width:100px; height:25px; background-image:/header_media/blue.png; text-align:center;">test</div>
</div>

Answer 2

您正在接近问题。使用<img />标签显示的图像是一个元素。这意味着它占用空间。看起来你正试图在他们之上挑选文字。

有一种更好的方法是在用于保存文本的元素上使用背景图像。从您的代码看起来您希望这三个框彼此相邻。这涉及定位内容。使用相对定位似乎是一个坏主意。它可能会破裂。花十分钟时间阅读一篇关于CSS定位的文章。静态，绝对，相对和浮动。

这样的事情会更好。将元素浮动，使它们彼此相邻。然后在完成后清除它们，以便稍后的内容出现在应该的位置最后使用css url属性设置背景。在这种情况下，我只是添加了颜色，但留在语法中，如果你愿意，可以指定图像。

http://jsfiddle.net/FUZDW/

div { height: 50px; width: 100px; border: 1px solid black; }
div#menu1 { background: red url('pathToImage'); }
div#menu2 { background: green; }
div#menu3 { background: blue; }

div.menu { float: left; }

<div class="menu" id="menu1">red</div>
<div class="menu" id="menu2">green</div>
<div class="menu" id="menu3">blue</div>
<br style="clear: both;" />
my page content

标题中的图像上的文本

2 个答案: