html - 如何使文本越过 CSS 背景 img

Question

我被要求为朋友制作一个按钮，但是我无法使文本保持在正确的位置。

这是我的 HTML 代码

<div id="sign-in-button">
    <p>Sign-in</p>
</div>

这是我的 CSS 代码

#sign-in-button{
    height: 20px;
    width: 60px;
    background-color: orange;
    background-image: url(external_links_icon.png);
    background-position: right;
    background-repeat: no-repeat;
    border:1px solid gray;
    border-radius: 5px;
    position: absolute;
}

您可能已经注意到“登录”一词不在橙色块内。你们中的任何人都知道解决方案吗？

Answer 1

它是由 p 标签引起的，请尝试使用 span 标签。

<div id="sign-in-button">
  <span>Sign-in</span>
</div>