CSS制作渐变图片/文字

---

.pic {
    background: url("https://upload-images.jianshu.io/upload_images/4559317-086ccd3bf3649ab6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240"),-moz-linear-gradient(#f00, #00f);
    background: url("https://upload-images.jianshu.io/upload_images/4559317-086ccd3bf3649ab6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/240"),-webkit-linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
    width: 200px;
    height: 200px;
}

image.png

添加渐变色：

h1.gradual-change{
  font-weight: bold;
  font-family: helvetica;
  text-align:center;
  background: -webkit-linear-gradient(left, #000, #fff);     /* 背景色渐变 */
  -webkit-background-clip: text;         /* 规定背景的划分区域 */
  -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
}

image.png