html - 设置了半混合模式的图像

Question

我想为我的图像添加一个带有颜色的图层并设置混合模式，例如乘以所有图像宽度的 50%。像那样：

我知道如何通过如何创建 50% 的图像宽度来创建完整图像？

这是完整图像的示例

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

Answer 1

实现这一目标的一种方法是像这样使用背景混合模式：

*{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>