Создание маски через CSS?

Question

Начал значит недавно изучать такую тему, как макирование через CSS. Пытаюсь наложить маску на объект, но она почему-то не работает (или работает но не так, как задумал я). Помогите, подскажите, что ж я делаю не так?

Вот код который я использовал:

HTML

<div class="rect">
 <div class="mask"></div>
</div>

CSS

.rect{
    width: 450px;
    height: 185px;

    background: url(rect.png);
    background-size: cover;

    border: 2px solid red;
}
.mask{
    mask: url("gamestart.png");
    -webkit-mask: url("gamestart.png");
    mask-size: cover;
    -webkit-mask-size: cover;
    width: 100%;
    height: 100%; 
}

Изображения:

Answer 1

Попробуйте указывать маску тому же элементу, который вы хотите "замаскировать".

.rect{
    width: 450px;
    height: 185px;

    background: url(https://i.stack.imgur.com/t52JS.png);
    mask: url(https://i.ibb.co/RcSdQ7f/1.png);
    -webkit-mask: url(https://i.ibb.co/RcSdQ7f/1.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    background-size: cover;
    border: 2px solid red;
}

<div class="rect">
 <div class="mask"></div>
</div>

БЛОГ НА HUSL

Создание маски через CSS?

Ответы (1 шт):