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

Question

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

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

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

标签： javascriptcsstextmask

Answer 1

我会尝试这样的事情

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