css给img图片设置颜色，实现图片占比设置

1、使用css3的 filter(滤镜) 属性，给图像设置一个阴影效果

左边为原图，右边为自定义颜色的图片如下：

代码如下：

<style>
  .filter_pic{
     filter: drop-shadow(130px 0px red);
  }
</style>
<div class="filter_pic">
    <img src="" alt="../images/thq/img.png">
</div>

把原图隐藏
.box {
  position: relative;
  overflow: hidden;
  height:300px;
}
.filter_pic {
  filter: drop-shadow(130px 0px red);
  position: absolute;
  left: -130px;
  padding-right: 30px;// 防止box设置隐藏时阴影消失
}
<div class='box'>
    <div class="filter_pic">
        <img src="" alt="../images/thq/img.png">
    </div>
</div>

2、实现图片占比设置

.box {
  position: relative;
  overflow: hidden;
  height:300px;
}
.filter_pic {
  filter: drop-shadow(130px 0px red);
  position: absolute;
  left: -130px;
  padding-right: 30px;// 防止box设置隐藏时阴影消失
  bottom: 0;
  height: 58%;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  //也可通过截图属性设置占比
  // clip: rect(128px 280px 280px 0px);
}
<div class='box'>
    <img src="" alt="../images/thq/img.png">
    <div class="filter_pic">
        <img src="" alt="../images/thq/img.png">
    </div>
</div>