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

【问题标题】：How to add text and image into one link and display it over that image on site?如何将文本和图像添加到一个链接中并将其显示在站点上的该图像上？
【发布时间】：2014-03-28 00:44:50
【问题描述】：

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

它应该是什么样子：

现在的样子：

图像在 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>

【问题讨论】：

你需要的是根据背景图像调整文本大小，对吧？
我不想调整大小，我想在图像上显示带有文本的 b 标签。
好吧，尝试删除 i 标签...它在 CSS 上已被弃用，所以您不应该首先使用它...与 b 标签相同。
好的，我使用 b 的强插入。我认为它不能解决我的问题。
文本可以直接添加到按钮图像中还是必须分开？

标签： html css

【解决方案1】：

我不知道你可以改变多少你的方法，但你可以有一个 div，你可以在其中放置你的锚点，在 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);
 }

【讨论】：

jsfiddle : jsfiddle.net/NcxhL

【解决方案2】：

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

它会给出这样的结果：

HTML：

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

CSS：

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

如果它不起作用，请提供一个 jsfiddle，以便我们进行处理。

【讨论】：

我的图片在哪里？兄弟我需要静态图片吗？我的意思是
好吧，我不知道，但是在 jQuery 中，您可以轻松替换链接的背景图像。或者你甚至可以用你的不同图像准备几个 CSS 类并在 jQuery 中切换类。对我来说，这似乎是更清洁的解决方案。检查小提琴：jsfiddle.net/NcxhL/2 我想这就是你想要的。也许你可以用你的 jQuery 更新你的小提琴然后我们可以看到如何处理你的图像切换。

【解决方案3】：

也许这不是最好的解决方案，但它是我可以使用您当前的标记获得的唯一解决方案。我将给文本和相对于链接的绝对定位。之后，使用 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();
    });
});

http://jsfiddle.net/NcxhL/1/

【讨论】：

【解决方案4】：

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

CSS

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

HTML

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

Example

【讨论】：