我可以在 CSS 中的 div 上剪切掩码文本吗（有或没有 JS 的帮助）？
Can I clip mask text over a div in CSS (with or without the help of JS)?
我想在 CSS 中制作一个外观精美的按钮，它在左侧显示数字的文本叠加层（见下图）。
是否可以在 CSS 中（有或没有 JS 的帮助）将叠加文本屏蔽到元素上，类似于 Photoshop 'Clipping Mask'？
编辑：你们一如既往地想知道我做了一些测试，我确实做了，但是没有设法使用绝对和相对位置将数字正确定位在页面上按钮的位置，所以我在这里问不仅这样我可以获得帮助，而且这样我就可以以一种可以通过 Google 轻松找到的格式存档答案。我试过这个。我想要明确的答案，这样我就不会只使用 'works' 的方式，而是使用效果很好的方式。
我会尝试一些东西like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}
我想在 CSS 中制作一个外观精美的按钮，它在左侧显示数字的文本叠加层（见下图）。
是否可以在 CSS 中（有或没有 JS 的帮助）将叠加文本屏蔽到元素上，类似于 Photoshop 'Clipping Mask'？
编辑：你们一如既往地想知道我做了一些测试，我确实做了，但是没有设法使用绝对和相对位置将数字正确定位在页面上按钮的位置，所以我在这里问不仅这样我可以获得帮助，而且这样我就可以以一种可以通过 Google 轻松找到的格式存档答案。我试过这个。我想要明确的答案，这样我就不会只使用 'works' 的方式，而是使用效果很好的方式。
我会尝试一些东西like this
html:
<div class="number">1</div>
css:
.number{display: inline-block; background-color: #ccc; max-width: 50px; max-height: 50px; width: 50px; height: 50px; font-size: 80px; font-weight: bold; text-align: center; line-height: 60%; color: #000; overflow: hidden; vertical-align: middle;}