我可以在 CSS 中的 div 上剪切蒙版文本吗（有或没有 JS 的帮助）？

Question

我想在 CSS 中制作一个外观漂亮的按钮，它在左侧显示一个数字的文本覆盖（见下图）。

是否可以在 CSS（有或没有 JS 的帮助下）将覆盖文本覆盖到元素上，类似于 Photoshop 的“剪贴蒙版”？

编辑：和往常一样，你们想知道我做了一些测试，我做了，但没有设法使用绝对和相对位置将数字正确定位在页面上的按钮位置，所以我在这里问不仅是为了让我可以获得帮助，但这样我就可以以一种可以通过 Google 轻松找到的格式存档答案。我试过这个。我想要明确的答案，这样我就不会只使用一种“有效”的方法，而是一种有效的方法。

Answer 1

我会尝试一些类似这样的html：<div&nbsp;class="number">1</div>css：.number{display:&nbsp;inline-block;&nbsp;background-color:&nbsp;#ccc;&nbsp;max-width:&nbsp;50px;&nbsp;max-height:&nbsp;50px;&nbsp;width:&nbsp;50px;&nbsp;height:&nbsp;50px;&nbsp;font-size:&nbsp;80px;&nbsp;font-weight:&nbsp;bold;&nbsp;text-align:&nbsp;center;&nbsp;line-height:&nbsp;60%;&nbsp;color:&nbsp;#000;&nbsp;overflow:&nbsp;hidden;&nbsp;vertical-align:&nbsp;middle;}