渐变色

作者: Haiya_32ef | 来源:发表于2018-04-02 14:09 被阅读0次

设置文字颜色透明 color: transparent;
设置背景剪切为文字 background-clip: text;
注意:background-clip为css3属性,ie10才兼容

代码:

.demo-2 {
  display: inline-block;
  font-family: "PingFangSC-semibold";
  font-size: 30px;
  text-align: center;
  color: transparent; /* 首先要设置文字透明 */
  -webkit-background-clip: text; /* 其次设置背景剪切为text */
  background-image: linear-gradient(
                    90deg,
                    #7e40ee 0,
                    #63d9ee 100%
    );
}

.demo-2.demo-2-1 {
  background-size: 200%;
  background-position: 10% 54%;
  background-image: url("http://img.hb.aicdn.com/24d85605d56d0d670bd7b5dc8f81625881eb43a242b9a-CMwyfa_fw658");
}

效果

image.png