css 图片 填充颜色渐变效果

CSS图片填充颜色渐变效果是一种让图片更加鲜明、生动的方式。可以利用CSS的linear-gradient属性来为图片设置填充颜色，实现很cool的效果。

  .grad-bg {
    background: linear-gradient(180deg,rgba(223,129,158,1) 0%,rgba(255,191,105,1) 50%,rgba(246,229,141,1) 100%),url("../images/flower.jpg") center center/cover no-repeat; 
  }

上面的代码中，grad-bg是一个图片容器的class名，可以自定义。background属性中，第一个linear-gradient是设置渐变背景，一般渐变效果有两种，一种是水平（180deg）、垂直（90deg）渐变，可以自行设定。第二个background则是设置图片，center指图片水平和垂直居中，cover指图片默认铺满容器，no-repeat指不重复。

同时，使用CSS可以设置图片的混合模式，进一步增强视觉效果。比如通过mix-blend-mode属性，可以让图片和背景颜色“混合”在一起，达到非常有艺术感的效果。

  .mix-blend {
    background-color: #632f9e;
    mix-blend-mode: screen;
  }

上述代码中，mix-blend是容器的class名，可以自定义。background-color指容器的背景颜色，可以自行更改。mix-blend-mode则是设置混合模式，具体的混合模式可以参考W3school上的文档。

鉴于CSS图片填充颜色渐变效果操作简单，代码易于修改，因此使用很广泛。希望我们的文章可以帮助大家学习和掌握相关技能！