html - 如何将文本和图像添加到一个链接中并在网站上显示在该图像上？

Question

你能给我建议如何在图像上显示文本吗？文本是可变的，我不能用 photoshop 解决它？图像是响应图像居中，并在链接背景中重复。宽度和高度没问题。非常感谢。

它应该是什么样子:

现在的样子:

图像在 X 上重复:

CSS:

a.elipsis{
    background: url('showmore-bg.png') repeat-x;
}

HTML:

<a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#">
  show more <!-- text that should be over image -->
  <img style="position: relative;" class="cond-arr" src="/css/show_more.png" alt="show_more" />
</a>

Answer 1

我不知道你可以在多大程度上改变你的方法，但你可以有一个 div，你可以在其中放置你的 anchor ，并且在 CSS 中你可以将该 div 的背景设置为你的图像并设置 div 的尺寸与您的图片大小完全相同。

检查这个:http://jsfiddle.net/jHmP7/1/

<div class="imageContainer">
    <a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#">Some Text</a>
</div>


.imageContainer {
       width:200px; 
       height:100px; 
       background-image: url(your image);
 }