Есть ли способ сделать эффект «дырокола» в CSS [дубликат] ⇐ CSS

[Anonymous]

Эффект, который мне очень хотелось бы воспроизвести, — это «дырокол». Что-то вроде обрезки, но через другой элемент.
Можно имитировать этот эффект, когда фон охватывает всю область просмотра, но я не нашел способа сделать это, когда фон , скажем, карточка.
Ниже приведен пример того, как я хотел бы, чтобы это выглядело:

< div class="snippet-code">

Код: Выделить всё

html {
height: 100%;
--backround: linear-gradient(15deg, red, blue);
}

body {
background-image: var(--backround);
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
}

article {
display: block;
background-color: white;
width: fit-content;
height: 505px;
margin: auto;
}

h1 {
display: block;
box-sizing: content-box;
position: static;
background: var(--backround) fixed;
color: transparent;
text-transform: capitalize;
width: 100%;
background-clip: text;
font-weight: bolder;
}

Код: Выделить всё

01AAAAAAAAAAAAAAAAAAAAAAAAAA
02AAAAAAAAAAAAAAAAAAAAAAAAAA
03AAAAAAAAAAAAAAAAAAAAAAAAAA
04AAAAAAAAAAAAAAAAAAAAAAAAAA
05AAAAAAAAAAAAAAAAAAAAAAAAAA
06AAAAAAAAAAAAAAAAAAAAAAAAAA
07AAAAAAAAAAAAAAAAAAAAAAAAAA
08AAAAAAAAAAAAAAAAAAAAAAAAAA
09AAAAAAAAAAAAAAAAAAAAAAAAAA
10AAAAAAAAAAAAAAAAAAAAAAAAAA
11AAAAAAAAAAAAAAAAAAAAAAAAAA
12AAAAAAAAAAAAAAAAAAAAAAAAAA

Но на «карточке» лучшее, что я могу сделать, — это следующее: там, где ясно, что цвет текста не совпадает с фоном. Дополнительные изменения усугубят это несоответствие.

Код: Выделить всё

html {
height: 100%;
--backround: linear-gradient(15deg, red, blue);
}

.card {
display: block;
padding: 5em 10em;
margin: 0 auto;
width: fit-content;
background-image: var(--backround);
}

article {
display: block;
background-color: white;
width: fit-content;
height: 505px;
margin: auto;
}

h1 {
display: block;
box-sizing: content-box;
position: static;
background: var(--backround) fixed;
color: transparent;
background-clip: text;
font-weight: bolder;
}

Код: Выделить всё

01AAAAAAAAAAAAAAAAAAAAAAAAAA
02AAAAAAAAAAAAAAAAAAAAAAAAAA
03AAAAAAAAAAAAAAAAAAAAAAAAAA
04AAAAAAAAAAAAAAAAAAAAAAAAAA
05AAAAAAAAAAAAAAAAAAAAAAAAAA
06AAAAAAAAAAAAAAAAAAAAAAAAAA
07AAAAAAAAAAAAAAAAAAAAAAAAAA
08AAAAAAAAAAAAAAAAAAAAAAAAAA
09AAAAAAAAAAAAAAAAAAAAAAAAAA
10AAAAAAAAAAAAAAAAAAAAAAAAAA
11AAAAAAAAAAAAAAAAAAAAAAAAAA
12AAAAAAAAAAAAAAAAAAAAAAAAAA

Фиксированный фон текста масштабируется по области просмотра, а не по карточке.

Есть ли какой-нибудь способ это сделать?

Подробнее здесь: https://stackoverflow.com/questions/791 ... ect-in-css