染色效果

基于滤镜的方案

不完全支持

使用多个滤镜组合，形成自己想要的染色效果

1. 原图如第一张

   <img src="avatar.jpg" />

2. 给图片增加i一种降低饱和度的橙黄色染色效果（如第二张），几乎所有色相都会被收敛到35~40 之间

   img {
       filter: sepia(1);
   }

3. 提高主色调的饱和度（如第三张），这种变化一般需要手动慢慢调整

   img {
       filter: sepia(1) saturate(4);
   }

4. 最后将每个像素的色相以指定角度偏移（如第四张）

   img {
       filter: sepia(1) saturate(4) hue-rotate(295deg);
   }

5. 添加动画，实现图片染色即鼠标移动后回复的效果

   

上面效果看不去不是太好看

基于混合模式的方案

不完全支持

luminosity 混合模式会保留上层的 HSL 亮度信息，并从它的下层西区色相和饱和度信息，再将这两层混合

1. mix-blend-mode：需要把图片包裹在一个容器中，并把容器的背景色设置为我们想要的主色调，但这种动画会不生效

   <div class="box">
       <img src="avatar.jpg" />
   </div>

   .box {
       background: hsl(335, 100%, 50%);
   }
   
   .box img {
       mix-blend-mode: luminosity;
   }

   

2. background-blend-mode：不用图片元素，而是用 <div></div> 元素，把这个元素的第一层背景设置为要染色的图片，第二层背景设置为主色调，这种动画生效

   <div class="box" style="background-image: url(avatar.jpg)" />

   .box {
       width: 100px;
       height: 100px;
       background-size: cover;
       background-color: hsl(335, 100%, 50%);
       background-blend-mode: luminosity;
       transition: background-color .5s;
   }
   .box:hover {
       background-color: transparent;
   }

   这种自然的多，但图片尺寸需要设死