Текст как фон css?

Сделайте отдельный декоративный слой внутри карточки. Например, span с классом watermark и aria-hidden="true", затем обычный блок content с полезным текстом.

Добавьте надписи pointer-events: none, чтобы она не перехватывала клики. Ее крупный размер задайте отдельно. Absolute убирает декоративный слой из обычного потока, поэтому он не толкает текст карточки.

Используйте этот прием только для украшения. Значимая информация должна оставаться в основном содержимом, а контраст текста поверх фона нужно проверить.

Я действительно делал прозрачной всю карточку, поэтому все бледнело.

Отдельный слой решил проблему, текст больше не сдвигается.

Поместите большую надпись отдельным элементом в карточку и расположите ее абсолютным позиционированием за основным содержимым. Например, структура может содержать <span class="watermark" aria-hidden="true">DEMO</span> и соседний блок с обычным текстом. Карточке задайте position: relative, декоративному слою position: absolute; inset: 0; z-index: 0; pointer-events: none, а содержимому position: relative; z-index: 1. Для аккуратного локального порядка слоев можно добавить карточке isolation: isolate.

У самой надписи используйте полупрозрачный цвет, например color: rgb(0 0 0 / 8%), и крупный font-size. Не ставьте opacity на всю карточку: тогда прозрачным станет и полезный текст. Чтобы расположить слово внутри декоративного слоя, можно применить его собственную сетку с выравниванием или обычное позиционирование, не затрагивая разметку содержимого.

Надпись не будет занимать место в нормальном потоке, но ее размер все равно нужно проверить. Длинное слово может выходить за края на узком экране. Если обрезание является частью замысла, настройте его на нужном декоративном контейнере и убедитесь, что не обрезались важные элементы карточки.

Атрибут aria-hidden подходит только потому, что слово в примере декоративное и не добавляет обязательного смысла. Если это статус заказа, предупреждение или иной значимый текст, его нельзя просто скрыть от вспомогательных технологий ради внешнего вида.

После настройки проверьте читаемость основного текста и работу ссылок поверх надписи. Сам по себе маленький процент прозрачности не гарантирует достаточный контраст на любом фоне.