Html 如何将文本和图像添加到一个链接中，并将其显示在站点上的图像上？

你能告诉我如何在图像上显示文字吗。文本是可变的，我不能用photoshop解决它？图像为响应图像居中且在链接中循环重复。宽度和高度都可以。多谢各位

它应该是什么样子的：

现在的样子：

图像在X上重复：

CSS:

HTML:

---

我不知道你能改变多少方法，但你可以有一个div，你可以在其中有你的锚，在CSS中，你可以将该div的背景设置为你的图像，并将div的尺寸设置为与你的图像完全相同的大小

选中此项：

---

您只需将图像作为链接的背景，并将其包装在div中。 你给你的链接一个固定的大小，你的包装器将处理响应部分

它会给出这样的结果：

HTML:

---

如果它不起作用，请提供一个jsfiddle，这样我们就可以处理它。

也许这不是最好的解决方案，但它是我用您当前的标记可以得到的唯一解决方案。我将给出文本的绝对位置和链接的相对位置。然后，使用jQuery，我将根据链接的宽度和整个文本的宽度计算文本的位置

$(document).ready(function(){
    function center(){
        var link_w = $('#link').width();
        var text_w = $('#text').width();
        $('#text').css('left', link_w/2-text_w/2+'px');
    };
    center();
    $(window).resize(function(){
        center();
    });
});

---

也许以下内容可以满足您的需求

CSS

HTML

---

您需要的是根据背景图像调整文本的大小，对吗？我不想调整大小，我想在图像上显示带有文本的b标记。那么，请尝试删除I标记。。。它在CSS上已被弃用，因此您首先不应该使用它。。。和b标签一样。好的，我用b代替。我认为这并不能解决我的问题。文本可以添加到按钮图像中，还是必须分开？jsfiddle:jsfiddle.net/ncxhl这里是我的图像，我需要静态图像？我的意思是，好吧，我不知道，但是在jQuery中，您可以很容易地替换链接的背景图像。或者，您甚至可以使用不同的图像准备几个CSS类，并在jQuery中切换这些类。对我来说，这似乎是更干净的解决办法。检查小提琴：我想这是你想要的。也许你可以用jQuery更新你的fiddle，然后我们可以看看如何处理你的图像切换。

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

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

<div class='wrapper'>
    <a style="display:block; text-align: center" class="elipsis" href="#">
    show more <!-- text that should be over image -->
    </a>
</div>

a.elipsis{
    background: url('show_more.png') no-repeat;
    width: xxx; /* width of your image */
    height: xxx; /* height of your image */
    margin-left: auto;
    margin-right: auto;
}

div.wrapper {
    background: url('showmore-bg.png') repeat-x;
    width: 100%;
}

$(document).ready(function(){
    function center(){
        var link_w = $('#link').width();
        var text_w = $('#text').width();
        $('#text').css('left', link_w/2-text_w/2+'px');
    };
    center();
    $(window).resize(function(){
        center();
    });
});

.elipsis {
    margin: 0px;
    height: auto;
    width: 100%;
    text-align: center;
    display: block;
    overflow: hidden;
    background-image: url(showmore_bg.png);
    background-repeat: repeat-x;
}
.elipsis .showmore{
    background-image: url(showmore.png);
    height: 32px;
    width: 295px;
    bottom: 10px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

<a class="elipsis" href="#">
<p class="showmore">show more</p>
</a>