Маска-изображение с png-file ⇐ CSS

[Anonymous]

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


.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 ... mask_4.png);
/* My own - does not work */
/* -webkit-mask-image: url(); /* From the example - works */
mask-image: url(https://www.bildhost.com/images/2021/02 ... mask_4.png);
mask-image: url();
}< /code>


< /code>
< /div>
< /div>
< /p>
Я также пытался добавить маски-image в Head_images. Тот же эффект: он работает с примером-PNG, но не с моим. Итак, я предполагаю, что с моим PNG что -то не так, но я не могу сказать, что.>

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