Question

我无法想出在图片上放置文字的好方法。这就是我想要做的事情：

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

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

Answer 1

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

Answer 2

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

<a href="index.html">
 <img src="images/rightArrow.png" id="img2">
 <span style="position:absolute;left:95px;top:33px">test</span>
</a>

Answer 3

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

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

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

Answer 4

正如迈克琼斯所说，你会使用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上使用onclick选项，而不是文本周围的href。

在文档上放置文本

4 个答案:

HTML

CSS