如何用CSS实现可移动的全屏遮罩透明带效果？

问题分析 #

你尝试用CSS遮罩实现「前景元素大部分可见，仅一条移动的透明带显示下方背景」的效果，但遇到两个核心问题：

1. 全屏遮罩时，修改*mask-position*无效果——因为遮罩尺寸与元素完全一致，无法通过移动位置展示不同区域
2. 缩小遮罩尺寸后，未被遮罩覆盖的前景区域完全透明，破坏了前景大部分可见的需求

方案一：修正CSS遮罩实现 #

核心思路是让遮罩高度超出元素范围，通过移动遮罩位置让透明带在元素内滑动，同时保证遮罩覆盖元素的区域始终保留「大部分不透明+中间透明带」的结构。

完整代码 #

<div class="wrapper">
  <div class="mask">
    <div class="content">
      <img src="https://media.gettyimages.com/id/182803848/photo/illustration-of-a-blue-number-2-in-3d.jpg?s=612x612&w=gi&k=20&c=GZvcBjuWwhLKFxhTUJX5lN4axZwXugVSTaJ_QPE0BA0=" />
    </div>
  </div>
</div>

body {
  background: black;
}

.wrapper {
  height: 500px;
  width: 500px;
  background: white;
  border: 1px black solid;
  background-image: url("https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_1280.jpg");
  background-size: contain;
}

img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.mask {
  height: 100%;
  width: 100%;
  /* 遮罩渐变：上下为完全不透明（black），中间10%为透明带 */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 40%,
    transparent 50%,
    black 60%,
    black 100%);
  /* 遮罩高度设为元素的2倍，留出移动空间 */
  -webkit-mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
  /* 动画：遮罩从顶部移动到底部，带动透明带滑动 */
  animation: slideMask 3s linear infinite;
}

@keyframes slideMask {
  to {
    -webkit-mask-position: 0% 100%;
  }
}

.content {
  height: 100%;
  width: 100%;
}

关键说明 #

• 设置*mask-size*: 100% 200%，让遮罩总高度为元素的2倍，这样移动*mask-position*时，透明带能在元素范围内完整滑动
• 通过渐变百分比控制透明带的宽度（示例中为10%的高度范围），上下保留足够的不透明区域，保证前景大部分可见
• 动画修改*mask-position*从0% 0%到0% 100%，实现透明带从顶部滑到底部的效果

方案二：无需遮罩的替代实现（伪元素叠加渐变） #

如果不想使用CSS遮罩，可以通过给前景元素添加伪元素，用渐变背景模拟遮罩效果，通过动画移动背景位置实现透明带滑动。

完整代码 #

<div class="wrapper">
  <div class="content">
    <img src="https://media.gettyimages.com/id/182803848/photo/illustration-of-a-blue-number-2-in-3d.jpg?s=612x612&w=gi&k=20&c=GZvcBjuWwhLKFxhTUJX5lN4axZwXugVSTaJ_QPE0BA0=" />
  </div>
</div>

body {
  background: black;
}

.wrapper {
  height: 500px;
  width: 500px;
  background: white;
  border: 1px black solid;
  background-image: url("https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_1280.jpg");
  background-size: contain;
  position: relative;
}

img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.content {
  height: 100%;
  width: 100%;
  position: relative;
}

/* 伪元素模拟遮罩：除透明带外，其他区域用白色覆盖（与wrapper背景一致），让前景仅在透明带区域透出背景 */
.content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    white 0%,
    white 40%,
    transparent 50%,
    white 60%,
    white 100%);
  background-size: 100% 200%;
  animation: slideOverlay 3s linear infinite;
}

@keyframes slideOverlay {
  to {
    background-position: 0% 100%;
  }
}

关键说明 #

• 伪元素的渐变背景中，白色区域与wrapper的背景色一致，覆盖在前景img上方，模拟「不透明」效果
• 中间透明区域让img透出下方wrapper的背景图，通过动画移动背景位置，实现透明带滑动的效果

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