文字颜色效果

文字颜色渐变和文字图片背景

效果如下：

文字颜色-渐变

文字遮罩-照片

代码如下所示：

css样式

css 复制代码

.text1 {
  margin: 0 auto;
  font-size: 80px;
  text-align: center;
  font-weight: bold;
  background: -webkit-gradient(linear, 30% 20%, 80% 80%, from(blue), to(red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text2 {
  margin: 0 auto;
  font-size: 80px;
  text-align: center;
  font-weight: bold;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606824051454&di=585aecf368bb4e66197db57f2b4538b0&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F13%2F41%2F01300000201800122190411861466.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html

html 复制代码

<body>
  <div class="text1">文字颜色-渐变</div>
  <div class="text2">文字遮罩-照片</div>
</body>

更新时间：2022/12/09 13:40:03

本页目录