CSS如何实现半区纯色半区图片的文字遮罩效果

核心原理 #

文字填充效果的核心是background-clip: text属性，该属性会将元素的背景裁剪为文字的轮廓形状，配合透明文字色即可让背景作为文字填充色显示。之前的实现将色块、图片作为子元素放在文字下层，子元素背景不会被父级的background-clip属性裁剪，因此无法实现文字透出填充的效果。

方案一：纯CSS单元素实现（推荐，无冗余标签） #

利用CSS多背景特性，在同一个元素上叠加两层背景：左半区放纯色、右半区放图片，统一应用文字裁剪即可，不需要额外嵌套DOM。

.title {
  font-size: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  text-align: center;
  padding: 10px;
  /* 多背景按书写顺序从上层到下层排列 */
  background:
    /* 左半区纯色：硬边渐变实现左50%纯色、右50%透明 */
    linear-gradient(to right, #83CBFF 50%, transparent 50%) left/100% 100% no-repeat,
    /* 右半区图片：右对齐，占容器50%宽度 */
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_%28remastered%29.jpg/640px-The_Blue_Marble_%28remastered%29.jpg') right/50% 100% no-repeat;
  /* 兼容webkit内核与标准语法 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

对应HTML代码：

<div class="title">EARTH</div>

注意事项 #

• 多背景书写顺序不能颠倒：纯色层需要写在图片层上方，避免图片覆盖左半区纯色
• 两层背景必须添加no-repeat属性，否则背景默认平铺会占满整个容器
• 图片层尺寸设置为宽度50%、高度100%，右对齐后刚好填满右半区，不会拉伸变形

方案二：双文字层叠加实现（适合交互动效场景） #

如果需要给左右半区文字单独添加动画、交互效果，可以用两个完全重叠的文字层，分别通过clip-path裁剪出左右半区，各自配置填充样式：

.title-wrap {
  position: relative;
  font-size: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.title-left, .title-right {
  position: absolute;
  width: 100%;
  text-align: center;
}
/* 左半区：纯色填充，裁剪掉右50%区域 */
.title-left {
  color: #83CBFF;
  clip-path: inset(0 50% 0 0);
}
/* 右半区：图片填充，裁剪掉左50%区域 */
.title-right {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/The_Blue_Marble_%28remastered%29.jpg/640px-The_Blue_Marble_%28remastered%29.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: inset(0 0 0 50%);
}

对应HTML代码：

<div class="title-wrap">
  <div class="title-left">EARTH</div>
  <div class="title-right">EARTH</div>
</div>

注意事项 #

• 两个文字层的文本内容、字体大小、行高、内边距必须完全一致，否则拼接处会出现错位
• 两个层通过clip-path裁剪后仅显示对应半区，重叠后刚好拼接为完整文字，可单独给任意一层绑定hover动画、位移效果等，扩展性更强

内容的提问来源于stack exchange，提问作者Myth Vince