Question

我正在尝试在图片上添加一些文字。我已将图像的位置设置为 relative ，文本的位置为绝对。它在Firefox中完全正常，但在Chrome中却没有。

我在Chrome中看到的只是一张图片。

有人可以帮助我吗？

我的代码：

<p class="call text-right hidden-xs tel">
    <a href="tel:+18003787566" style="position:absolute; top:300px; left:875px; padding:6px; background-color:#292D30; font-size:26px; padding-left: 100px; padding-right: 127px;">Call: 1-800-378-7566</a>
</p> 
<img src="img/slider/slider01.jpg" alt="" title="" style="margin-top:-28px; position:relative;" />

Answer 1

这可以帮到你。添加

<p class="call text-right hidden-xs tel">
    <a href="tel:+18003787566" style="position: absolute;
    top: 50px;
    left: 10px;
    padding: 6px;
    background-color: #292D30;
    font-size: 26px;
    padding-left: 100px;
    padding-right: 127px;
    z-index: 999;">Call: 1-800-378-7566</a>
</p>

添加了顶部和左侧位置以及添加的z-index。

参见示例

http://jsfiddle.net/nanduh/wo2eyhp6/

文本在图像工作正常在Firefox中，但不是在chrome中

1 个答案: