Изображение с настроенным режимом полублендирования

Question

Я хотел бы добавить к своему изображению слой с цветом и установить режим наложения, например, умножить на 50% всей ширины изображения.Вот так:

Я знаю, как создать это для полного изображения, как создать на 50% ширины изображения?

Вот пример на полномизображение

[https://codepen.io/Matteokr/pen/PyJwKB][2]

Answer 1

Один из способов добиться этого - использовать background-blend-mode , например:

*{box-sizing:border-box;padding:0; margin:0}
.wrapper{
    position: relative;
    width: 480px;
    height:320px;
    margin: 64px auto;   
    background-image: url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.image{
    position:absolute;
    left: 0;
    top: 0;
    width: 480px;
    height:320px;
    background-blend-mode: color;
    background-color: #ffff006e;
    background-image: linear-gradient(yellow, #d3e600), url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.wrapper,
.image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
 
.layer{
  position: relative;
  width: 65%; /*change the percentage here*/
  height:100%;
  overflow: hidden
}

<div class="wrapper">
  <div class="layer">
    <div class="image"></div>
  <div>
</div>