0

我想不出在图像上放置文本的好方法。这是我想做的事情：

这就是我所拥有的。我想在左侧的黄色导航标志上放置文本（如主页、联系我们、关于我们等的正常导航），但我真的想不出一个好的方法来做到这一点。我试着做同样的事情，我把它们的实际标志放在绝对位置上，但没有成功。我还计划将文本放在页面中间的蓝色条上，但这将以相同的方式完成。

我不需要将字母本身作为指向下一页的链接，但是如果我将文本放在上面时会发生这种情况，那就这样吧。

4

4 回答 4

3

您可能会将图像合并为背景的一部分。我对此相当陌生，因此知识有限，但是将所有这些图像添加到单个“背景图像”CSS 属性中可能是您​​最好的选择。

于 2012-04-05T23:44:42.230 回答
2

在图像所在的位置使用跨度，并将其设置为绝对位置，顶部和左侧将其放置在正确的位置。这是一个示例，可以尝试使用杆子上的帖子顶部来获取中间的文本测试：

<a href="index.html">
 <img src="images/rightArrow.png" id="img2">
 <span style="position:absolute;left:95px;top:33px">test</span>
</a>
于 2012-04-05T23:50:59.623 回答
1

这样的事情怎么样？http://jsfiddle.net/UMtXy/1/

您可以单独定位每个元素，添加悬停样式，更改背景等。​</p>

HTML

（比仅使用 DIV 更具语义）

<nav>
   <ul>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li><a href="#">Links can go here too</a></li>
   </ul>
</nav>

CSS

NAV LI{
    background-image:url(http://people.eecs.ku.edu/~ageoffri/unavitSite/images/rightArrow.png);    
    background-repeat: no-repeat;
    background-position: top left;
    width: 200px;
    height: 40px;
    padding: 12px 32px;
    font: 12px/12px arial, sans-serif;
}

NAV LI:hover {
    color: red;
}

​</p>

于 2012-04-05T23:53:58.267 回答
0

正如 mike jones 所说，您将使用 css 变量 background/background-image ，它只是 1 个路标，您将重复此类，但仅更改文本，例如：

CSS 样式代码（必须添加）：

.yellowarrow{
background: url(http://people.eecs.ku.edu/~ageoffri/unavitSite/images/leftArrow.png);
background-repeat: no-repeat;
width: 170px;
height: 35px;
margin-bottom: 12px;
}

代替：

<img src="images/leftArrow.png" id="img3" /><img src="images/leftArrow.png" id="img4" /><img src="images/leftArrow.png" id="img5" /><a href="contact.html"><img src="images/leftArrow.png" id="img6" /></a>

和：

    <div class="yellowarrow">Menu 1</div>
<div class="yellowarrow">Menu 2</div>
<div class="yellowarrow">Menu 3</div>
<div class="yellowarrow">Menu 4</div>
<div class="yellowarrow">Menu 5</div>
<div class="yellowarrow"><a href="contact.html">Contact Us</a></div>

就个人而言，这将是最方便的方法，我还建议在菜单 DIV(s) 上使用 onclick 选项，而不是在文本周围使用 href。

于 2012-04-05T23:55:33.690 回答