Маска-изображение с png-файлом ⇐ Html

[Anonymous]

У меня проблема с изображением-маской: я хочу использовать PNG (или svg) в качестве обтравочной маски изображения, чтобы изображение отображалось в определенной форме. Я нашел в Интернете несколько примеров того, как это сделать, но сейчас обратитесь к этому: https://web.dev/css-masking/.
Когда я использую PNG, который автор использовал в своем примере, он работает. Однако, если я использую свой собственный png (или svg), этого не происходит.
Я убедился, что изображение уменьшено до белой заливки и прозрачной части, как в примере. Я также просто изменил URL-адрес, больше ничего. Однако обрезанное изображение не видно.
Я знаю, что в HTML можно использовать SVG (что будет работать). Однако мне это нужно в CSS.
Вот код, который я использую:

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

.header_image {
width: 650px;
height: 410px;
}

.header_image img {
height: 100%;
width: 100%;
object-fit: cover;
}

.one {
-webkit-mask-image: url(https://www.bildhost.com/images/2021/02/21/clipping-mask_4.png);
/* My own - does not work */
/* -webkit-mask-image: url(https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask.png); /* From the example - works */
mask-image: url(https://www.bildhost.com/images/2021/02/21/clipping-mask_4.png);
mask-image: url(https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask.png);
}

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

[img]https://images.unsplash.com/photo-1567359781514-3b964e2b04d6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1431&q=80[/img]

Я тоже пытался добавить изображение-маску в head_images. Тот же эффект: с примером-png работает, но не с моим. Итак, я предполагаю, что с моим png что-то не так, но я не могу сказать, что именно.
Кто-нибудь знает, где я ошибаюсь?

Подробнее здесь: https://stackoverflow.com/questions/663 ... h-png-file