设置了半混合模式的图像答案

【问题标题】：Image with half blend mode set up设置了半混合模式的图像
【发布时间】：2018-10-14 02:05:49
【问题描述】：

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

我知道如何在 50% 的图像宽度上创建完整图像？

这是完整图像的示例

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

【问题讨论】：

StackOverflow 允许您在问题中为 HTML/CSS/JS 制作交互式代码 sn-ps。请检查并粘贴您的代码。

标签： html css background-blend-mode

【解决方案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>

【讨论】：