Как с помощью псевдоэлементов сделать чтобы внутри картинки была фигура, которая наполовину её закрывает?

Question

У меня есть картинка 800 на 600 px и мне нужно чтобы её часть закрывала фигура, как это реализовать с помощью псевдоэлементов или есть другие способы?

.new-offer{
    background: url(image/new-offer-bg.jpg)  no-repeat 100% 100%;
    width: 100%;
    height: 587px;
    border-radius: 20px;
    z-index: 1;
    
    
}

.new-offer:before{
    display: block;
    content: " ";
    height: 587px;
    color: #282828;
    height: 800px;
    z-index: 2;
}

Answer 1

У меня есть картинка 800 на 600 px

Такое перекрытие?

.new-offer{
    background: url(https://thumbs.gfycat.com/UnfitZestyHorsechestnutleafminer-size_restricted.gif)  no-repeat 100% 100%;
    width: 800px;
    height: 600px;
}

.new-offer:before{
    display: block;
    content: " ";
    width: 400px;
    height: 300px;
    background-color: #282828;
    opacity: 0.5;
}

<div class='new-offer'></div>

БЛОГ НА HUSL

Как с помощью псевдоэлементов сделать чтобы внутри картинки была фигура, которая наполовину её закрывает?

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