- 設(shè)置文字顏色透明 color: transparent;
- 設(shè)置背景剪切為文字 background-clip: text;
注意:background-clip為css3屬性,ie10才兼容
代碼:
.demo-2 {
display: inline-block;
font-family: "PingFangSC-semibold";
font-size: 30px;
text-align: center;
color: transparent; /* 首先要設(shè)置文字透明 */
-webkit-background-clip: text; /* 其次設(shè)置背景剪切為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
