如何在渐变背景上实现响应式元素遮罩，保证滑动时渐变效果一致？

这里提供两种兼容现代浏览器的优雅实现方式，都不需要额外添加冗余伪元素，支持圆角等复杂样式：

方案1：渐变对齐方案（推荐，兼容性更好） #

核心思路是让label直接复用container的渐变参数，通过偏移背景位置实现和父容器渐变完全对齐，滑动时自动同步位置。

代码示例 #

/* 定义公共参数，方便统一修改 */
:root {
  --main-gradient: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
  --label-width: 300px;
  --label-left: 20%;
  --label-radius: 12px; /* 可自定义圆角，无需额外适配 */
}

.container {
  background: var(--main-gradient);
  width: 100%;
  height: 200px;
}

.element-1,
.element-2 {
  height: 100px;
}

.element-1 {
  background: #fff;
}

.label {
  width: var(--label-width);
  height: 100%;
  position: relative;
  left: var(--label-left);
  border-radius: var(--label-radius);
  box-sizing: border-box;
  padding: 0 16px;
  color: #fff;
  display: flex;
  align-items: center;
  /* 核心渐变对齐逻辑 */
  background: var(--main-gradient);
  /* 背景尺寸和container完全一致 */
  background-size: 100% 200px;
  /* 反向偏移label的left值，让渐变和container的位置完全重合 */
  background-position: calc(-1 * var(--label-left)) 0;
}

HTML代码不需要做任何修改。

特点 #

• 响应式调整时，只需要修改--label-left变量即可同步更新label位置和渐变对齐状态，渐变全程连贯
• 支持任意圆角、边框、阴影等样式，无需额外适配
• 兼容性好，支持所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）

方案2：mask遮罩方案 #

如果需要label本身是透明的（比如要在下方加其他动效），可以用mask遮罩实现，核心是让element-1的白色背景只在label之外的区域显示，label位置直接透出container的渐变。

代码示例 #

:root {
  --main-gradient: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
  --label-width: 300px;
  --label-left: 20%;
  --label-radius: 12px;
}

.container {
  background: var(--main-gradient);
  width: 100%;
  height: 200px;
}

.element-1,
.element-2 {
  height: 100px;
}

.element-1 {
  background: #fff;
  /* 核心遮罩逻辑：从全白区域减去label对应的位置，透出下方渐变 */
  -webkit-mask: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000) no-repeat;
  -webkit-mask-size: 100% 100%, var(--label-width) 100%;
  -webkit-mask-position: 0 0, var(--label-left) 0;
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#000, #000),
    linear-gradient(#000, #000) no-repeat;
  mask-size: 100% 100%, var(--label-width) 100%;
  mask-position: 0 0, var(--label-left) 0;
  mask-composite: subtract;
}

.label {
  width: var(--label-width);
  height: 100%;
  position: relative;
  left: var(--label-left);
  border-radius: var(--label-radius);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

特点 #

• label区域完全透明，可实现下方内容穿透的效果
• 同样支持任意圆角和动态位置调整

两种方案都完全满足窗口尺寸调整时label滑动、渐变连贯统一的需求，比伪元素遮盖的方案扩展性更强，适配复杂布局也不会产生冗余代码。

内容的提问来源于stack exchange，提问作者Vinz Clortho