Могу ли я обрезать текст маски над div в CSS (с помощью JS или без него)? - PullRequest
0 голосов
/ 24 октября 2019

Я хотел бы сделать необычную кнопку в CSS, где она отображает текстовое наложение для числа слева (см. Изображение ниже).

Возможно ли это в CSS (с помощью или без помощиJS), чтобы замаскировать наложенный текст на элемент, похожий на тот, что используется в «Обтравочной маске» в Photoshop?

РЕДАКТИРОВАТЬ: Как всегда вы, ребята, хотите знать, что я провел какое-то тестирование, которое я провел, но не смогправильно расположить число там, где кнопка была на странице, используя абсолютное и относительное положение, поэтому я спросил здесь не только, чтобы я мог получить помощь, но и чтобы я мог заархивировать ответ в формате, который можно легко найти через Google,Я попробовал это. Мне нужен окончательный ответ, чтобы я не просто использовал способ, который «работает», но и тот, который работает хорошо.

text

1 Ответ

1 голос
/ 24 октября 2019

Я бы попробовал что-то вот так

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