使用图片填充文字

CSS
2023-10-01 11:19:33

有时候文字颜色很奇特，并不是一个简单的渐变色或者纯色，他可能用一个图片做背景

代码示例

代码

↓ 会员用户可见内容 ↓
css 复制代码 
h1{
  background-image: url('img/9b8e9989f50130c25927bb93cfff99fb.jpeg');
   /* 主要用到这个方法 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 文字需要设置为透明 */
  color: transparent;
  background-color: white;
}

clip是裁剪的意思，这里的意思是将背景裁剪到文字，当然文字有个默认的纯色，想要让文字凸显背景，那么只有将文字设置为透明色